Angular-Advanced-Topics

Angular app meant as an exercise for advanced topics

To Create

• npm install ngx-bootstrap bootstrap and add in style.scss @import "~bootstrap/scss/bootstrap.scss";
• ng add @fortawesome/angular-fontawesome then add icon library in app.module or lazy loaded module:

    // Add an icon to the library for convenient access in other components
    // library.addIcons(faCoffee);
    library.addIconPacks(fas, far); // to add all of them
  }

usage : <fa-icon [icon]="['fas', 'save']"></fa-icon>

• angular JWT authentication - npm install --save @auth0/angular-jwt
• create auth service
• create login guard
• create login component - import reactive forms module
• create interceptor to add token to all requests (optional, alternative is to add headers for all) -

  'Content-Type': 'application/json',
  'Authorization': `Bearer ${auth_token}`
})
return this.http.get(apiUrl, { headers: headers })

• create resolvers for route requests

@Injectable()
export class HomeResolve implements Resolve<Observable<any>> {
  constructor(private service: HomeApiService) {}

  resolve(): Observable<any> {
    return this.service.getHomeData();
  }
}

usage: in component

constructor(private activatedRoute: ActivatedRoute) {
    const { data } = this.activatedRoute.snapshot.data;
  }

usage on route:

const routes: Routes = [
  { path: '', component: HomeComponent, resolve: { data: HomeResolve } },
];

• inputs @Input() list: Array<any> = new Array(); usage <app [list]="someListInClass"></app>
• outputs @Output() add: EventEmitter<any> = new EventEmitter(); usage <app (add)="someFunctionInClass($event)"></app> this.add.emit(obj);

other snippets

  get formControlArray() {
    return this.formGroup.get('arr') as FormArray;
  }

  get formControl() {
    return this.formGroup.get('controlName');
  }

  ngOnChanges(changes: SimpleChanges) {
        const currentUsers = changes.users && changes.users.currentValue;

        if (currentUsers) {
            this.users = currentUsers;
            this.initializeFormGroup(this.users);
        }
    }

  // resolve with parameters
    resolve(activatedRoute: ActivatedRouteSnapshot): Observable<GroupDetail> {
        const { params } = activatedRoute;
        return this.service.get(params.id);
    }