---
# System prepended metadata

title: Learning Angular from Scratch
tags: [Learning Angular from Scratch]

---

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