Unit 03 & 04

ngOnInit() runs when the component is initialized or created. It is commonly used for loading data, initializing variables, and calling APIs.

ngOnInit() {
  console.log("Component started");
}

ngOnChanges() runs when a value received by the component changes. It is useful when a component receives data from another component and that data changes.

ngOnChanges() {
  console.log("Value changed");
}

ngDoCheck() is used when Angular performs change checking. It allows the developer to perform custom checking when changes need to be detected.

ngDoCheck() {
  console.log("Checking changes");
}

ngOnDestroy() runs just before the component is removed or destroyed. It can be used to perform cleanup operations before the component is removed.

ngOnDestroy() {
  console.log("Component removed");
}

*ngIf is a structural directive used to show or hide an HTML element based on a condition.

<p *ngIf="isLoggedIn">
    Welcome User
</p>

If isLoggedIn is true, the paragraph is displayed; otherwise, it is not displayed.

*ngFor is a structural directive used to repeat an HTML element for each item in a collection.

<ul>
    <li *ngFor="let student of students">
        {{ student }}
    </li>
</ul>

Here, the <li> element is repeated for every student in the students collection.

*ngSwitch is used when there are multiple possible choices. It works with *ngSwitchCase, which defines individual cases, and *ngSwitchDefault, which executes when no case matches.

<div [ngSwitch]="day">

    <p *ngSwitchCase="'Monday'">Start of week</p>

    <p *ngSwitchCase="'Friday'">End of week</p>

    <p *ngSwitchDefault>Other day</p>

</div>

The appropriate content is displayed based on the value of day.

ngClass is an attribute directive used to add or remove CSS classes dynamically based on a condition.

<p [ngClass]="isSuccess ? 'success' : 'danger'">
    Result
</p>

If isSuccess is true, the success CSS class is applied; otherwise, the danger class is applied.

Interpolation is used to display TypeScript data in the HTML template.

{{ expression }}

name = "Farhan";

<p>Student Name: {{ name }}</p>

The value of name is displayed in the HTML.

Property binding is used to set an HTML element's property using a TypeScript value.

[property]="value"

<button [disabled]="isDisabled">
    Submit
</button>

Here, the disabled property of the button is controlled by the isDisabled variable.

Event binding is used to handle user actions or events and call a method in the component.

(event)="method()"

<button (click)="showMessage()">
    Click Me
</button>

When the button is clicked, the showMessage() method is called. Common events include (click), (mouseenter), (mouseleave), (input), (change), and (submit).

Two-way data binding allows data to flow in both directions between the component and the HTML template. It uses [(ngModel)].

<input [(ngModel)]="name">

<p>Hello {{ name }}</p>

When the user changes the input, the name variable is updated, and changes to name are reflected back in the input.

In template-driven forms, most of the form is controlled from the HTML template. It is simpler and suitable for basic forms. It uses ngForm and ngModel.

<form #studentForm="ngForm"
      (ngSubmit)="submitForm(studentForm)">

    <label>Name:</label>
    <input type="text" name="studentName" ngModel>

    <button type="submit">Submit</button>
</form>

submitForm(studentForm: any) {
    console.log(studentForm.value);
}

Here, #studentForm creates a template reference, ngForm tells Angular to treat the form as an Angular form, ngModel binds the input to the form, and ngSubmit handles form submission.

In reactive forms, the form structure and controls are mainly created and managed in the TypeScript file. It uses FormGroup and FormControl.

<form [formGroup]="studentForm"
      (ngSubmit)="submitForm()">

    <input formControlName="studentName">
    <input formControlName="email">

    <button type="submit">Submit</button>
</form>

studentForm = new FormGroup({
    studentName: new FormControl(''),
    email: new FormControl('')
});

submitForm() {
    console.log(this.studentForm.value);
}

Reactive forms are more structured and are suitable for complex forms.

An Angular Service is a class used to store reusable data and functionality that can be shared by different components. Services help avoid repeating the same code in multiple components.

A service can be created using the Angular CLI:

ng generate service student

or:

ng g service student

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class StudentService {

  getStudent() {
    return "Farhan";
  }
}

Here, StudentService contains the reusable getStudent() method. The providedIn: 'root' configuration makes the service available throughout the application.

Dependency Injection is a mechanism in Angular through which Angular provides a required service to a component instead of the component creating the service itself. This makes components easier to manage and allows them to use reusable services.

import { StudentService } from './student.service';

constructor(private studentService: StudentService) {
}

Here, StudentService is injected into the component through the constructor. Angular provides the required service automatically.