Angular · Theory

Get Started

Theory

4/43

Get Started

Get started means: open the project, find app.component, change the title, save, see the browser refresh. Then add a second component with ng generate component student-card.

File map: .ts = logic, .html = mark-up, .css = look. Don’t put SQL in the component. Don’t put all CSS global if it belongs to one card.

Trap: editing dist/ instead of src/. Dist is build output. Another trap: skipping generate and copy-pasting a huge Stack Overflow component you can’t read.

Exam tip

Change title → generate StudentCard → see it on screen.

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

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

Short notes

DefEdit src, not dist. ts + html + css.
Ruleng g c student-card for a new piece.
TrapEditing build output.

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

Get Started

Example

Short notes

Questions

Get Started

Example

Short notes

Questions