--- title: Learning Angular from Scratch tags: Learning Angular from Scratch image: --- # Learning Angular from Scratch ### 1. Angular Architecture * [Angular Architecture](https://angular.io/guide/architecture) ### 2. Characteristics: * Interpolation ```app.component.html <div>{{ title }}</div> ``` ```app.component.ts export class AppComponent{ title="my-first-app"; } ``` * property binding ``` <img alt="item" [src]="itemImageUrl"> ``` * event binding ```app.component.html <div (click)="handleClick()"></div> ``` ```app.component.ts export class AppComponent{ handleClick = () => {...} } ``` * two-way binding - ==ngModel== ``` <div [(ngModel)]="handleAction()"></div> ``` > before using ngModel, you have to import the { FormsModule } in the app.module.ts * class binding - ==ngClass== ![](https://i.imgur.com/kg9C1J4.png) -> can add logic, if condition is true, use which style * render a list (looping) -> ==ngFor== ```component.html <ul> <li *ngFor="let hero of heros">{{ hero.name }}</li> </ul> ``` ```component.ts export class AppComponent{ heros = [ {id: 1, name: "Amber"}, {id: 2, name: "Bob"}, {id: 3, name: "John"}, {id: 4, name: "Vivian"} ]; } ``` > Browser will show as below ![](https://i.imgur.com/kIxOwa8.png) * Conditional Element -> ==ngIf== \ (use-timing: if the button is clicked and then show the content) * Services (@Injectable) - Angular DI system (Dependency Injection) * Making HTTP requests (get/post/patch/delete) \ (==HttpClientModule==, ==HttpClient==) ### Link [tutor structure](https://hackmd.io/-YTscG91Q5eRMj5Xg1i28A)