Angular · Theory

Modules

Theory

19/43

Modules

NgModule groups declarations and imports. AppModule (or app.config standalone) boots the app. Feature module MarksModule holds marks pages so AppModule stays small.

declarations: components of this module. imports: other modules you need (CommonModule for *ngIf). exports: what other modules may use.

Standalone components skip NgModule. Still import CommonModule / RouterLink in the component imports array. Trap: declaring a component in two modules.

Exam tip

declarations vs imports vs exports. Standalone alternative.

Example

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `
    <h1>{{ title }}</h1>
    <button (click)="toggle()">Toggle</button>
    <p *ngIf="open">Panel open</p>
  `,
})
export class AppComponent {
  title = "Angular practice";
  open = true;
  toggle() {
    this.open = !this.open;
  }
}

Modules: toggle open. Say whether the panel is on screen after one click.

Short notes

DefNgModule = declarations + imports + exports.
RuleFeature module per area. Or standalone imports[].
TrapSame component declared twice.

import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <h1>{{ title }}</h1> <button (click)="toggle()">Toggle</button> <p *ngIf="open">Panel open</p> `, }) export class AppComponent { title = "Angular practice"; open = true; toggle() { this.open = !this.open; } }

Modules

Example

Short notes

Questions

Modules

Example

Short notes

Questions