angular practices-练习

2024-07-02 15:49 由龙剑伟发表于 #前端开发

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