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

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

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!")

}

}