Interview Q&A

Short answer: ngular applications. Common Commands: ng new my-app # Create new Angular project ng serve # Run development server ng generate component login # Generate component ng build # Build for production ng test # Run unit tests Real-Time In a company, developers use ng generate component invoice to create a new invoice component with all… required files.…… ngular Components & Templates The @Component decorator defines a…

Explain a bit more

component in Angular. ngular applications. Common Commands: ng new my-app # Create new Angular project ng serve # Run development server ng generate component login # Generate component ng build # Build for production ng test # Run unit tests Real-Time

Example code

In a company, developers use ng generate component invoice to create a new invoice component with all… required files.… ngular Components & Templates The @Component decorator defines a component in Angular. ngular applications. Common Commands: ng new my-app # Create new Angular project ng serve # Run development server ng generate component login # Generate component ng build # Build for production ng test # Run unit tests Real-Time Example: In a company, developers use ng generate component invoice to create a new invoice component with all required files.… ngular Components & Templates The @Component decorator defines a component in Angular. ngular applications. Common Commands: ng new my-app # Create new Angular project ng serve # Run development server ng generate component login # Generate component ng build # Build for production ng test # Run unit tests Real-Time Example: In a company, developers use ng generate component invoice to create a new invoice component with all required files. ngular Components & Templates The @Component decorator defines a component in Angular. It tells Angular how to create nd display the component by providing metadata such as the selector, template, and styles. ✅ Example: @Component({ selector: 'app-user-card', templateUrl: './user-card.component.html', styleUrls: ['./user-card.component.css'] }) export class UserCardComponent {} 📌 Real-Time Example: In a CRM app, @Component({ selector: 'app-customer' }) is used to define a reusable customer display card. the different types. Data binding connects the component's class logic with its template (HTML). ✳ Types of Data Binding: Type Syntax Description Interpolation {{ value }} Bind component data to HTML Property Binding [property]="val ue" Bind DOM properties to component Event Binding (event)="handle r()" Bind DOM events to component methods Two-Way Binding [(ngModel)]="va lue" Sync data both ways (input ↔ component) ✅ Example: <!-- Interpolation --> <h1>{{ title }}</h1> <!-- Property Binding --> <input [value]="name" /> <!-- Event Binding --> <button (click)="greetUser()">Greet</button> <!-- Two-Way Binding --> <input [(ngModel)]="username" /> in templates? *ngIf: Conditionally includes or removes an element. *ngFor: Iterates over a list and renders template for each item. ✅ Example: <!-- *ngIf --> <div *ngIf="isLoggedIn">Welcome, {{ user.name }}</div> <!-- *ngFor --> <ul> <li *ngFor="let product of products">{{ product.name }}</li> </ul> 📌 Real-Time Example: E-commerce product list: *ngFor displays product cards dynamically. ngular? ➤ Parent to Child: Use @Input() // child.component.ts @Input() userData: any; <!-- parent.component.html --> <app-child [userData]="user"></app-child> ➤ Child to Parent: Use @Output() + EventEmitter // child.component.ts @Output() notify = new EventEmitter<string>(); this.notify.emit('Hello Parent!'); <!-- parent.component.html --> <app-child (notify)="handleNotification($event)"></app-child> 📌 Real-Time Example: Pass user object to UserCardComponent via @Input. Emit "user clicked" event back to parent with @Output. describe them. Lifecycle hooks are methods that Angular calls at specific stages of a component's existence. 🌀 Common Lifecycle Hooks: Hook Description ngOnInit Called once after component is initialized ngOnChanges Called when input properties change ngDoCheck Called during every change detection ngAfterViewI nit Called after component’s view has been initialized ngOnDestroy Cleanup just before the component is destroyed ngOnChanges() is called whenever an @Input() property changes in the component. ✅ Example: @Input() user: User; ngOnChanges(changes: SimpleChanges) { console.log('User changed:', changes.user.currentValue); } 📌 Real-Time Example: When a new user is selected in a dashboard, ngOnChanges() updates the user detail card dynamically. do you implement it? Two-way data binding means synchronizing the view and the component model utomatically. ✅ Syntax: <input [(ngModel)]="username" /> Requires importing FormsModule. 📌 Real-Time Example: In a login form, updating the email input field updates the email property in the component instantly. ngular provides two ways: ➤ Template-Driven Forms: Use ngModel, required, etc. <form #form="ngForm"> <input name="email" [(ngModel)]="email" required /> <div *ngIf="form.controls.email?.invalid">Email is required.</div> </form> ➤ Reactive Forms: Use FormGroup, FormControl, and Validators. form = new FormGroup({ email: new FormControl('', [Validators.required, Validators.email]) }); 📌 Real-Time Example: Login or signup forms showing real-time validation messages. Use Reactive Forms to generate controls at runtime. ✅ Example: form: FormGroup; constructor(private fb: FormBuilder) {} ngOnInit() { this.form = this.fb.group({}); this.questions.forEach(q => { this.form.addControl(q.key, new FormControl('')); }); } 📌 Real-Time Example: Survey builder where form fields change based on user selections. be used? ngModel is a directive that enables two-way data binding in template-driven forms. ✅ Example: <input [(ngModel)]="name" /> Use it when: Working with template-driven forms Simple input binding is sufficient Must import FormsModule. 📌 Real-Time Example: Live search input field using [(ngModel)]="searchQuery" for filtering products. ngular Directives ttribute directives in Angular? ➤ Structural Directives: Change the structure/layout of the DOM by adding or removing elements. Prefix: * (e.g., *ngIf, *ngFor) Examples: *ngIf – conditionally includes elements *ngFor – loops over data to render elements *ngSwitch – conditionally renders one view out of many ➤ Attribute Directives: Change the appearance or behavior of an existing DOM element or component. Examples: ngClass – dynamically sets CSS classes ngStyle – sets inline styles dynamically Custom highlight directive (e.g., change color on hover) ✅ Real-Time Analogy: Structural: Like building or removing walls in a house (changes structure). Attribute: Like painting the walls (changes appearance only). directives in Angular? ➤ *ngIf: Conditionally displays content <div *ngIf="isLoggedIn">Welcome!</div> ➤ *ngFor: Iterates over a list <li *ngFor="let item of items">{{ item.name }}</li> ➤ ngSwitch: Selectively renders based on a condition <div [ngSwitch]="status"> <p *ngSwitchCase="'active'">Active</p> <p *ngSwitchCase="'inactive'">Inactive</p> <p *ngSwitchDefault>Unknown</p> </div> ngular? ➤ Steps:

Real-world example (ShopNest)

ShopNest admin can be built in Angular with modules/components, services for API calls, and reactive forms for product edit.

Say this in the interview

1. Define — one clear sentence (the short answer above).
2. Example — relate it to a project like ShopNest or your real work.
3. Trade-off — when you would not use it.