Angular topics to learn

1. Angular components 

Components are the most basic UI building block of an Angular app.

An Angular app contains a tree of Angular components.

A component must belong to an NgModule in order for it to be available to another component or application

@Component({

  selector: 'app-componentname',

  templateUrl: './componentname.component.html',

  styleUrls: ['./componentname.component.css']

})

app.module.ts

it have @NgModule it holds component declaration, Import section, Providers(interceptor) & Bootstrap

Example: 

import { APP_INITIALIZER, NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { AppHeaderComponent } from './components/app-header/app-header.component';

import { LoaderComponent } from './shared-module/loader/loader.component';

import { AppFooterComponent } from './components/app-footer/app-footer.component';

import { SettingService } from './core/services/setting-service/setting.service';

import { LoaderInterceptor } from './core/interceptors/loader-interceptor';

@NgModule({

  declarations: [

    AppComponent,

    AppHeaderComponent,

    LoaderComponent,

    AppFooterComponent,

    CallbackComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    HttpClientModule,

    BrowserAnimationsModule,

    DialogModule,

  ],

  providers: [

SettingService,

    {

      provide: APP_INITIALIZER,

      useFactory: (setting: SettingService) => function () { return setting.getJSON(); },

      deps: [SettingService],

      multi: true

    },

    {

      provide: HTTP_INTERCEPTORS,

      useClass: LoaderInterceptor,

      multi: true

    },

    {

      provide: HTTP_INTERCEPTORS,

      useClass: HttpServiceInterceptor,

      multi: true

    }

  ],

  bootstrap: [AppComponent]

})

app.component.ts

it will initialize the app component  and required inputs.

app.component.html

this is parent component for all other components.

Example:

<div *ngIf="!isAuthorized">

    <app-app-header></app-app-header>

        <main>

            <router-outlet></router-outlet>

        </main>

    <app-footer></app-footer>

</div>

There are four main types of angular decorators:

• Class decorators, such as @Component and @NgModule

• Property decorators for properties inside classes, such as @Input and @Output

• Method decorators for methods inside classes, such as @HostListener

• Parameter decorators for parameters inside class constructors, such as @Inject

2. Angular Bindings - [ngModel] also called two way binding - Property binding - Event binding 

3. Angular forms - Template driven forms - Reactive forms - FormControl - FormGroup - FormArray - FormBuilder 

4. Angular architechure - Modules - Components - Templates - Metadata - Data binding - Directives - Services - Dependency injection 

5. Lazy loading

6. Interceptor - HttpInterceptor is an interface implemented to the class - HttpRequest - HttpHandler - HttpEvent 

7. Canactivate and candeactivate 

8. Subject Behaviour, Replay, Async subject 

9. Angualr routing 

10. Dependency injections 

11. Material angular 

12. Angular Compiler - JIT - AOT 

13. Angular build files 

14. Angular Testing 

15. Angular life cycle -

 Ngonchnages() - NgonInit() - NgDoChecked() - NgAfterContentInit() - NgAfterContentChecked() - NgAfterViewInit() - NgAfterViewChecked() - NgDestroy() 

16. Rxjs 

17. Directives * Build in * Attribute * structural 

18. Custom directives 

19.Templates 

20. Services 

21. Authentication 

22. HTTP Services 

23. Animations 

24. Pipes - Completed 

25. Input and Outputs 

26. Deployment 

27. Package.json 

28. Libraries 

29. angular.json 

30. Routing guard 

31.state management