Please enable JavaScript.

Coggle requires JavaScript to display documents.

ANGULAR CONCEPTS - Coggle Diagram

- - - - NgModule
      - Component
      - Injectable
    - - Input
      - Output
    - - HostListeners
    - - Inject
- - - - ONE WAY BINDING
      - VIEW TO COMPONENT
      - <button (event_name) ="function()"> example </button>
- - - - ELSE
        
        USE NG TEMPLATE REFERENCE
      - THEN & ELSE
- - - - @ Injectable decorator
        
        USED TO INJECT SERVICE INTO COMPONENTS
        
        MAKE THE CLASS AS SERVICE
      - providedIn : root
        
        MAKES THE SERVICE AVAILABLE ACROSS APPLICATION
- - - - provide selector name
- - - - CREATE FEATURE MODULE
        
        ng g module <module_name> --route <rounte-name> --module app.module
      - CONFIGURE LOAD CHILDREN IN APPROUTING
  - - - IF PATH IS EMPTY
    - - USE path : **
    - - product/:pid1/:pid2
      - USE ActivatedRoute
        
        constructor (private activatedRoute : ActivatedRoute )
        {
        activtedRoute.params.subscribe(data => { this.pramQuery= data.id
        });
    - - constructor(private activatedRoute:ActivatedRoute) {
        activatedRoute.getQueryParams.subscribe(data=>{
        this.queryParam1=data.param1
        this.queryParam2=data.param2
        });
      - /product?param1=test&param2=test2
    - - {path : ' ' , redirectTo : 'product-view' : pathMatch : ''full}
    - - {path : products ,
        component : 'ParentRouteComponent'
        childern : [
        {path : 'view' , component : 'TestComponent'}
        ]
        }
  - - - Providers : [ { provide : LocationStrategy ,useClass :PathLocationStrategy ]
  - - - POINTING TO ROOT OF THE SERVER
    - - index.html
      - ng build --base-href="/demos/"
  - - - USE
        
        ROUTER MODULE
        
        ROUTES
      - create the routes array
      - PASS IT TO THE ROUTER MOUDLE AS AN ARGUMENT
  - - - NG GENERATE GAURD <GAURD NAME>
      - INJECT GAURD INTO THE PROVIDERS
    - - CAN ACTIVATE
      - CAN ACTIVATE CHILD
      - CAN DEACTIVATE
      - RESOLVE
      - CAN LOAD
- - - - NOT RECOMENDED
    - - RECOMENDED WAY
      - 3 PACKAGES
        
        BOOTSTRAP , JQUERY, POPPER
        
        npm i bootstrap jqyery popper --save
        
        npm i bootstrap3 --save
        
        NEED TO INSTALL STYLES AND SCRIPTS
        
        BOOTSTRAP WILL NOT WORK WITHOUT THIS
        
        EDIT angular.json file
        
        UNDER ARCHITECT
        
        STYLES PATH :check:
        
        SCRIPTS PATH :check:
    - - PATH OF STYLES AND SCRIPTS
      - CDN OUTDATED LINK
      - WRONG VERSION NUMBERING
  - - - HOW TO USE?
        
        IMPORT FORM MODULE IN APP.MODULE.ts
        
        ADD AN ENTRY IN ARRAY OF IMPORTS
        
        #<Form_Name> = 'ngForm'
        
        (ngSubmit) = 'method( <Form_Name>)'
        
        add ngModel + name
        ATTRIBUTES ON ALL ELEMENTS INSIDE FORM
        
        # <ELEMENT_NAME> ='ngModel'
        
        FOR TWO WAY BINDING
      - VALIDATION
        
        OPTIONS
        
        EMAIL
        
        NUMBER
        
        REQUIRED
        
        STATES OF FORM
        
        ng-touched
        
        ng-untouched
        
        ng-dirty
        
        ng-pristine
        
        ng-valid
        
        ng-invalid
        
        3 APPROACHES
        
        HIGHLIGHT THE ERRORS
        
        DISABLE SUBMIT BUTTON
        
        CUSTOM FIELD VALIDATON
    - - STEP 1
        
        IMPORT REACTIVE FORMS MODULE
        
        INSIDE APP.MODULE.TS
      - STEP2
        
        CREATE FORM INSIDE ANY COMPONENT.HTML
        
        FORM GROUP
        
        <form [formGroup] =<formName> />
        
        FORM CONTROLLER
        
        <input type= "text" formControlName="email"
        
        (ngSubmit) = ' method () '
      - 1 .CONCEPTS
        
        FORM BUILDER
        
        FORM CONTROLS
        
        FORM GROUP
      - STEP 3
        
        COMPONENT CLASS
        
        DEFINE THE FORM GROUP SAME NAME AS IN HTML
        
        COMPOSED OF FORM CONTROLLS
        
        IMPORT FORM, FORMGROUP, FORM BUILDER FROM @angular/forms
        
        PASS FORM BUILDER TO CONSTRUCTOR
        
        3.1.CREATE FORM CONTROL VARIABLES IN CONSTRUCTOR
        
        new FormControl()
        
        SAME NAME AS IN HTML
        
        formBuilder.group ( { email = new FormControl() } )
        
        3.2 ASSIGN IT TO THE FORM GROUP DEFINED
      - 2. VALIDATION
        
        3 APPROACHES
        
        HIGHLIGHT THE ERRORS
        
        DISABLE SUBMIT BUTTON
        
        CUSTOM FIELD VALIDATON
        
        <span *ngIf =<formName>.get(<controlName>).touched />
        
        <span *ngIf =<formName>.get(<controlName>).hasError(<validationName>) > Error message </span>
        
        ADD CONSTRAINTS IN TO CONTROL ELEMENT
        
        constructor ( private formBuilder :FormBuilder ) {
        this.<formName> =formBuilder.group(
        {
        email : ["",Validators.required, Validators.email],
        terms: ["",Valdiators.requiredTrue]
        }
        }
      - 3.FORM
        
        GET VALUE
        
        formName.value.<controlName>
        
        formName.value
        
        PATCH VALUE
        
        USE THIS TO SET INDIVIDUAL VALUE
        
        RESET
        
        <FORM NAME>. reset()
        
        SET VALUE
        
        <formName>.setValue()
        
        USE THIS TO SET ALL THE ELEMENT VALUES
        
        YOU CANNOT OMIT ANY ELEMENT
        
        VALUE CHANGES TRACK