Angular

  1. What is Angular?
  2. Installing Angular
  3. Angular CLI CommandsWhat are lifecycle hooks in Angular? Explain a few lifecycle hooks.
  4. What is TypeScript?
  5. Creating Angular project and Installing Bootstrap in Angular
  6. Different Folders and Files in Angular
  7. How angular works.
  8. Angular Architecture1 and Angular Architecture 2
  9. Modules to an Angular Project
  10. Difference between SingleQuote and Double Quote in Angular
  11. LifeCycle hooks in Angular
    1. Constructor
    2. ngOnChanges
    3. ngOnInit
    4. ngDoCheck
    5. ngAfterContentInit
    6. ngAfterContentChecked
    7. ngAfterViewInit
    8. ngAfterViewChecked
    9. ngOnDestroy
  12. Types of Data Binding in Angular
    1. One Way Binding
      1. String Interpolation
      2. Property Binding (When .ts sending data to .html) (What is the difference between properties and attributes in HTML?)
      3. Attribute Binding
      4. Class Binding and Style Binding
      5. Event Binding (When .html sending data to .ts)
      6. Difference between String Interpolation and Property Binding
    2. Two Way Binding
  13. Databinding in Angular
    1. String Interpolation
    2. Property Binding (When .ts sending data to .html)
    3. Event Binding (When .html sending data to .ts)
    4. Two way data binding
    5. Using LocalReference (aka Template Reference)(Not a data binding type but can be used to pass data)
    6. Using LocalReference with @ViewChild (aka Template Reference)
    7. Using Getters and Setters
  14. Component in Angular
    1. Parent and Child Component Communication via @Input(), @Output() and EventEmitter
    2. Child to Parent Component Communcation via @ViewChild()
    3. Any to Any Component Communication via Shared Services (Example : Sibling to Sibling)
    4. Event Emitter for cross component communication.
    5. Using subject in Service to communicate between component
    6. A Sample application displaying Parent and Child communication
    7. ng-content Directive in Component
    8. Getting Access to ng-content with @ContentChild
    9. Lazy loading, Eager loading and Preloading.
  15. Directives in Angular
    1. Structural Directive
      1. ngIf Directive
      2. ngIf with an else Condition
      3. ngFor Directive
      4. ngSwitch
    2. Attribute Directives
      1. ngStyle Directive
      2. ngClass Directive
  16. Service and Dependency Injection
  17. Routing in Angular
    1. Adding angular routing to a project which does not have routing
    2. Routing via app-routing.module.ts file
    3. WildCard Route and Redirecting Routes
    4. Route Parameters
    5. Routing in Child component
    6. Using routerLink in Angular.
    7. Programtically routing to other pages.
    8. ActivatedRoute and Passing Query Paramaters and Fragments
    9. Routing Guard
      1. CanActive
      2. CanActivateChild
      3. CanDeactivate
      4. CanLoad
      5. Resolve
  18. Observables in Angular
    1. Observables
    2. Creating custom observables
    3. Using Subject
    4. Loading a form page data using Observables
  19. Forms in Angular
    1. Submitting Angular Forms
    2. Passing Data in Forms using ngForm
    3. Understanding Form State Json
    4. Passing Data in Forms using ngForm and @ViewChild
    5. Validation in ngForm
    6. Form Grouping using ngModelGroup
    7. Demo Registration Form
    8. Demo Login Form in Angular
    9. Spinner for Loading
    10. Download a File using Angular and SpringBoot
  20. Angular Material
    1. Add Angular Material to a project
    2. Material Module
    3. Typography
    4. Angular Material Buttons
    5. Angular Material Button Toggle
    6. Angular Material Icons
    7. Angular Material Badges
    8. Angular Material Spinner
    9. Angular Material Progress bar
    10. Angular Material Navbar
    11. Angular Material SideNavbar
    12. Angular Material Menu
    13. Angular Material List
    14. Angular Material GridList
    15. Angular Material Expanson Panel
    16. Angular Material Card
    17. Angular Material Tabs
    18. Angular Material Stepper
    19. Angular Material Input – A form component
    20. Angular Material Select
    21. Angular Material Autocomplete
    22. Angular Material Checkbox and autocomplete
    23. Angular Material Date Picker
    24. Angular Material Tool tip
    25. Angular Material Snackbar
    26. Angular Material Dialog
    27. Angular Material Data table
    28. Reusable Material Data Table as a component
  21. Reactive Forms with Validations (Validation messages on HTML)
  22. Reactive Forms with Validations (Validation messages from TS)
  23. Reactive Forms with Validations (Support for server Side validation)
  24. Cookies, Session and Local Storage in Angular
  25. Pipes to Transform output in Angular
  26. Custom Pipes
  27. Services and Injectable in Angular
  28. Angular Module Loading
    1. Eager Loading.
    2. Lazy Loading
    3. PreLoading
  29. HttpModule
  30. HttpClientModule
  31. Route Guards in Angular
  32. Angular with NgRx
  33. Angular Animations
  34. Unit Testing in Angular
  35. Proxy in Angular

Reference :

ToDo :

  • Loading an asset in Angular – Image/Json
  • URLS
    • Json to ts

Interview Questions

  1. What is Angular? and Why Angular?
  2. Angular Architecture
  3. How angular works.
  4. Advantages and Challenges in Angular
  5. Just In Time and Ahead Of Time compilation
  6. Folders, Directory Structure and Files of Angular
  7. Final build files and their purpose
  8. Explain Components, Modules and Services in Angular
  9. What are lifecycle hooks in Angular? Explain a few lifecycle hooks.
  10. Databinding in Angular
    1. String Interpolation
    2. Property Binding
    3. Event Binding
    4. Two way data binding
    5. Using LocalReference (Not a data binding type but can be used to pass data)
    6. Using LocalReference with @ViewChild
    7. Using Getters and Setters
  11. How are observables different from promises?
  12. Directives in Angular
    1. ngIf Directive
    2. ngIf with an else Condition
    3. ngStyle Directive
    4. ngClass Directive
    5. ngFor Directive
    6. ngSwitch Directive
  13. Component in Angular and their communication
    1. Parent and Child Component Communication via @Input(), @Output() and EventEmitter
    2. Child to Parent Component Communcation via @ViewChild()
    3. Any to Any Component Communication via Shared Services (Example : Sibling to Sibling)
    4. Event Emitter for cross component communication.
    5. Using subject in Service to communicate between component
    6. A Sample application displaying Parent and Child communication
    7. ng-content Directive in Component
    8. Getting Access to ng-content with @ContentChild
    9. Lazy loading, Eager loading and Preloading.
  14. Explain the concept of Dependency Injection