https://angular.dev/tutorials/learn-angular/2-updating-the-component-class
example1:component
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
template: Hello, i dwell in {{city}} of {{province}} ,
standalone: true,
})
export class AppComponent {
city='Guang Zhou';
province= 'Guangdong province'
}
output:
Hello, i dwell in Guang Zhou of Guangdong province
example2: Composing Components
import {Component} from '@angular/core';
@Component({
selector: 'app-user',
template: Username: {{ username }} ,
standalone: true,
})
export class UserComponent {
username = 'youngTech';
}
@Component({
selector: 'app-root',
template: <section> <app-user /> </section> ,
standalone: true,
imports: [UserComponent],
})
export class AppComponent {}
output:
Username: youngTech
example3-Control Flow in Components- if
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
template: `
@if(isServerRunning){
Yes, the server is running
}
@else{
the server is stopped
}
@if(isLoggedIn){
Welcome back
} `, standalone: true, }) export class AppComponent { isLoggedIn = true; isServerRunning =false;}
output:
the server is stopped
Welcome back
example4- Control Flow in Components - for
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
template: @for(os of os;track os.id){ {{os.name}}:{{os.id}} }<p></p> @for(user of users; track user.id){ {{user.name}} } ,
standalone: true,
})
export class AppComponent {
os = [{id:'win', name:'windows'},{id:'osx', name:'MacOS'},{id:'ux', name:'unix'}];
users = [{id: 0, name: 'Sarah'}, {id: 1, name: 'Amy'}, {id: 2, name: 'Rachel'}, {id: 3, name: 'Jessica'}, {id: 4, name: 'Poornima'}]
}
output:
windows:win MacOS:osx unix:ux
Sarah Amy Rachel Jessica Poornima
example5- property-binding
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app.component.css'],
template: <div [contentEditable]="isEditable"></div> ,
standalone: true,
})
export class AppComponent {
isEditable = true;
}
more info can refer to:
https://angular.dev/guide/templates/property-binding
example6-event handling
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
template: <section (mouseover)="onMouseOver()"> There's a secret message for you, hover to reveal 👀 {{ message }} </section> <button (click)="greet()">save</button> ,
standalone: true,
})
export class AppComponent {
message = '';
onMouseOver() {
this.message='way to go!'
}
greet(){
alert("hello!")
}
}
example7-Component Communication with @Input
1.app.component.ts
import {Component} from '@angular/core';
import {UserComponent} from './user.component';
@Component({
selector: 'app-root',
template: <app-user name="Haley Long" /> ,
standalone: true,
imports: [UserComponent],
})
export class AppComponent {}
2.user.component
import {Component, Input} from '@angular/core';
@Component({
selector: 'app-user',
template: <p>The user's name is {{ name }}</p> ,
standalone: true,
})
export class UserComponent {
@Input() name = '';
}
output:
The user's name is Haley Long