ng interface

Angular (ng) Interface:

Angular is a TypeScript-based open-source front-end web application framework developed by Google. It's used for building dynamic, single-page web applications (SPAs) where the content is loaded dynamically and the page does not reload during user interactions.

  1. Components:typescriptCopy codeimport { Component } from '@angular/core';

    @Component({
    selector: 'app-root',
    template: '<h1>Hello, {{ name }}!</h1>',
    styles: ['h1 { color: blue; }']
    })
    export class AppComponent {
    name = 'Angular';
    }
    • The fundamental building blocks in Angular are components. Components are TypeScript classes that interact with the HTML view and handle the business logic.
    • Components are typically defined with the @Component decorator in Angular, specifying metadata such as the template, styles, and other properties.
  2. Modules:typescriptCopy codeimport { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';

    @NgModule({
    declarations: [AppComponent],
    imports: [],
    bootstrap: [AppComponent]
    })
    export class AppModule { }
    • Angular applications are modular, and functionality is organized into modules. A module is a logical grouping of components, services, directives, and pipes.
    • The @NgModule decorator is used to define a module, and it specifies which components belong to that module.
  3. Services:typescriptCopy codeimport { Injectable } from '@angular/core';

    @Injectable({
    providedIn: 'root',
    })
    export class DataService {
    // Service logic here
    }
    • Services are used for organizing and sharing code across components. They are typically singleton instances that can be injected into components.
    • The @Injectable decorator is used to define a service.
  4. Directives:typescriptCopy codeimport { Directive, ElementRef, Input } from '@angular/core';

    @Directive({
    selector: '[appHighlight]'
    })
    export class HighlightDirective {
    constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
    }
    }
    • Directives are instructions in the DOM that modify its structure or behavior. Angular has built-in directives (like *ngIf and *ngFor) and allows you to create custom directives.
  5. Dependency Injection:typescriptCopy codeimport { Component } from '@angular/core';
    import { DataService } from './data.service';

    @Component({
    selector: 'app-root',
    template: '<h1>{{ data }}</h1>',
    })
    export class AppComponent {
    data: string;

    constructor(private dataService: DataService) {
    this.data = dataService.getData();
    }
    }
    • Angular uses a dependency injection system to provide components, services, and other objects with their dependencies.
    • The Angular injector is responsible for creating and injecting dependencies.
  6. Templates and Data Binding:typescriptCopy codeimport { Component } from '@angular/core';

    @Component({
    selector: 'app-root',
    template: '<h1>{{ title }}</h1>',
    })
    export class AppComponent {
    title = 'Hello, Angular!';
    }
    • Angular uses templates to define the HTML structure of components. Data binding allows synchronization between the model (component) and the view (template).