// angular.json
{
  ...
  "projects": {
    "my-app": {
      ...
      "architect": {
        "build": {
          "options": {
            "aot": true,
            ...
          }
        }
      }
    }
  }
}

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
      },
    },
  },
});

npm install -g @angular/cli

ng new my-angular-app
cd my-angular-app

ng serve --open

npm install -g @vue/cli

npm create vue@latest
cd my-vue-app

npm run serve

TypeScript
// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {}
HTML
// app.component.html
<h1> Hello, Angular!</h1>

<template>
    <div>
        <h1>Hello, Vue!</h1>
    </div>
</template>

<script setup>

</script>

TypeScript
// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  numbers = [1, 2, 3, 4, 5];
}

HTML
// app.component.html
<ul>
  <li *ngFor="let number of numbers">{{ number }}</li>
</ul>

<template>
  <ul>
    <li v-for="number in numbers" :key="number">{{ number }}</li>
  </ul>
</template>

<script setup>
import { ref } from 'vue';
Const numbers = ref([1, 2, 3, 4, 5])
</script>

TypeScript
// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

})
export class AppComponent {
  name: string = '';
}
HTML
// app.component.html
<input [(ngModel)]="name" placeholder="Enter your name">
<p>Hello, {{ name }}!</p>

<template>
  <div>
    <input v-model="name" placeholder="Enter your name">
    <p>Hello, {{ name }}!</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const name = ref('');
</script>

TypeScript
// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isLoggedIn = false;
}

HTML
// app.component.html
<p *ngIf="isLoggedIn">Welcome, User!</p>
<p *ngElse>Please log in.</p>

<template>
  <p v-if="isLoggedIn">Welcome, User!</p>
  <p v-else>Please log in.</p>
</template>

<script setup>
import { ref } from 'vue';
Const isLoggedIn = ref(false)
</script>

TypeScript
// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  message = 'Click the button to display a message!';

  handleClick() {
    this.message = 'Button clicked!';
  }
}

HTML
// app.component.html
<button (click)="handleClick()">Click Me: {{ message }}</button>

<template>
 <button @click="handleClick">Click Me: {{ message }}</button>
 </template>
 <script setup> 
import { ref } from 'vue';
Const message = ref('Click the button to display a message!')
Const handleClick = () => {
message.value = 'Button clicked!';
 }; 
</script>

TypeScript
// app.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit() {
    console.log('Component initialized');
  }
}

HTML
// app.component.html
<h1>Angular - Lifecycle hooks</h1>

<template>
  <div>
    <h1>Vue - Lifecycle hooks</h1>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
  onMounted(() =>{
    console.log('Component mounted');
  })

</script>

TypeScript
//parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  parentData = {
    message: 'Hello from Parent!',
    number: 42
  };
onChildEvent(data: string) {
    console.log('Received data from Child:', data);
  }
}

HTML
//parent.component.html
<app-child [childData]="parentData" (childEvent)="onChildEvent($event)"></app-child>

TypeScript
//child.component.ts
import { Component, Input } from '@angular/core';

interface ChildProps {
  message: string;
  number: number;
}

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Input() childData: ChildProps;
  @Output() childEvent = new EventEmitter<string>();

 sendDataToParent() {
    this.childEvent.emit('New data from Child!');
  }
}
HTML
//child.component.html
<p>Received message: {{ childData.message }}</p>
<p>Received number: {{ childData.number }}</p>
<button (click)="sendDataToParent()">Send Data to Parent</button>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="incrementCount">Increment</button>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps([‘total’])
const emit= defineEmits(['countUpdated'])

Const totalNumber = ref(props.total)

const incrementCount = () => {
  totalNumber.value++;
  emit('countUpdated', totalNumber.value); // Emit event with updated count
};
</script>

<template>
  <div>
    <counter :initial-count="10" @countUpdated="handleCountUpdate" />
    <p>Total Count: {{ totalCount }}</p >
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Counter from './Counter.vue'; // Assuming Counter component is

const totalCount = ref(0);

const handleCountUpdate = (updatedCount) => {
  totalCount.value = updatedCount;
};
</script>