Learn Angular Crash Course 2021
app/main.ts
- import modules(e.g. fonts, http modules)
- auto-import bootstrap modules
how to pass data between components?
header HTML:
<header>
<h1>{{ title }}</h1>
<app-button color="green" text="Add"></app-button>
</header>
button ts:
import { Component, OnInit, Input } from '@angular/core';
export class ButtonComponent implements OnInit {
@Input() text: string;
@Input() color: string;
constructor() {}
ngOnInit(): void {}
}
button HTML:
<button [ngStyle]="{ 'background-color': color }" class="btn">
{{ text }}
</button>
how buttons pass data?
button ts:
import { Output, EventEmitter } from '@angular/core';
export class ButtonComponent implements OnInit {
...
@Output() btnClick = new EventEmitter();
...
onClick(): void {
this.btnClick.emit();
}
}
header HTML:
<app-button
color="green"
text="Add"
(btnClick)="toggleAddTask()"
></app-button>
header ts:
export class HeaderComponent implements OnInit {
...
toggleAddTask() {
console.log('toggle');
}
}