Angular · Theory

Installation

Theory

3/43

Installation

Install: Node.js first (LTS), then npm i -g @angular/cli. Check ng version. If ng is not found, PATH is wrong — not Angular’s fault.

ng new marks-app. Pick routing yes, stylesheet CSS unless the team said SCSS. ng serve. Open localhost:4200. That is installation done. Don’t jump to Docker on day one.

Trap: old Node (12/14) with a new CLI. Another trap: creating the project outside the folder you think you’re in, then editing the wrong files.

Exam tip

Node → CLI → ng new → ng serve.

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;
  }
}

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

Short notes

DefNode LTS + Angular CLI.
Ruleng new → ng serve → localhost:4200.
TrapWrong Node version / wrong folder.

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; } }

Installation

Example

Short notes

Questions

Installation

Example

Short notes

Questions