Please enable JavaScript.

Coggle requires JavaScript to display documents.

Angular - Coggle Diagram

- - - - EmitterEvent
        
        Emit cho component bắn dữ liệu
        
        subcriber cho component lắng nghe
  - - - Ở constructor
      - Có thể dùng inject(class) của angular core
    - - App module
        
        All application
        
        Injectable({providedIn:"root") :
        
        lazi loading
      - App Component
        
        All component except service
      - Other component
        
        All child component
    - - Injectable
- - - - Inject router to compoent
  - - - router-outlet
    - - RouterModule.forRoot(ROUTES) in import
        
        useHash: true
        
        if not parsed URLs
      - ROUTES: Routes
        
        children
        
        add <router-outlet> in html code
        
        ở compoent con của outlet cha
        
        Dynamic route
        
        :id/:name
        
        Guard
        
        service class implement CanActive
        
        service class implement CanActiveChild
        
        CanComponentDeactive
        
        data
        
        static: data
        
        dynamic: resolve
        
        create resolve
        
        asyncronous data
        
        use this.activeRoute.subcribe => get data in component
      - /404 { path: '**', redirectTo: '/not-found' }
      - => app-routing.module.ts
        
        RouterModule
        
        imports
        
        exports
        
        import to appModule
    - - absolute path
        
        /something
        
        localhost:4002/something
      - relative path
        
        something
        
        current/something
        
        ../something
      - In html code
      - [queryParams]
      - Trong thẻ <a>
    - - navigate
        
        relativeTo
        
        queryParams
        
        queryParamsHandling
      - Inject to component
    - - snapshot.params
        
        Return Observable
        
        Subcribe
      - Inject to component
      - data
    - - routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"
- - - - HttpClientModule
        
        imports
    - - http: HttpClient
        
        inject
  - - - create interceptor
        
        service
      - add in module
        
        { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
      - có thể khai báo nhiều interceptor
        
        thực hiện đồng thời
        
        không quan trọng thứ tự
      - tác dụng
        
        modify request before go to server
        
        response data from server
    - - fetch data
- - - - quang
        
        Quang
    - - shorten:5
  - - - implement PipTransform
      - @Pipe({name:"quangpro"})
    - - tốn peforman
      - fitler thay đổi khi data thay đổi
- - - - data stream
        
        User Input Event
        
        http request
      - handle asyncronous task
    - - subcribe
        
        do task happen in the future
        
        data
        
        error
        
        complete
    - - activeRoute.param
  - - - onDestroy
      - Memory leak
      - dc Angular xử lý
        
        với những Observable buildin
        
        route.param
    - - map
      - filter
      - tap
        
        xem dữ liệu
    - - comunicate between components
        
        Do not user EventEmitter
      - Like EventEmitter
      - Remember to Unsubcribe
      - BehaviorSubject
        
        Bắn event về ngay cả khi listener lắng nghe sau khi Observer bắn
        
        dùng trong login
        
        user login trước xong mới lấy token đi fetch data
- - - - retrive
      - validation
      - state data
  - - - add control in input
        
        ngModel
        
        <input>
        
        name
        
        radio
        
        '#email = "ngModel"
      - submit
        
        (ngSubmit)
        
        lắng nghe 1 chiều từ user
        
        <form>
        
        (ngSubmit)=onSubmit(f) #f="ngForm"
      - ngForm
        
        control
        
        data value
        
        error
        
        ' ViewChild('f') signUpForm: NgForm
        
        3 form
        
        no binding
        
        1 binding
        
        default value
        
        2 way binding
        
        get value
        
        ngModelFormGroup
        
        group data form
      - validator
        
        ng-valid/ng-invalid
        
        email, require,min,max...
        
        <input>
        
        css
        
        input.ng-valid.ng-touched
      - changeValue
        
        patchValue
        
        setValue
        
        reset()
      - add FormModule in appModule.ts
    - - Add ReactiveForm in module
      - form: Formgroup
      - new FormGroup({email: new FormControl(null, validator}, userdata: new FormGroup({...
        )
      - <form>
        
        formGroup="singUpForm"
      - input
        
        formControlName
      - getdata
        
        signupform.get('propertyName')
      - formArray
        
        formArrayName in html
        
        FormArray in ts
      - validator manually
        
        forbiddenName(control: FormControl):{[s: string]:boolean}
        
        username: new FormControl(null, [this.forbiddenName.bind(this)])