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
