deployment

Deploying an Angular App

Posted Murari NayakLeave a commentPosted in Learning

This article on Deploying an Angular App is part of the Learning Angular series. Deployment Preparations and Important Steps Steps:a) Build the app for production. Better to consider AIT or whatevr method we follow. ng build –prod –aot b) Set the correct elementIf Angular is being served form any folder that is not the root of the server, then the base href needs to be set to that folder.For an Angular app that is hosted on www.xyz.com/myapp, then we should set in the index.html fileor add it in the build script like ng build –prod –base-href=/myapp/ c) Need to make sure that  … [Read More]

angular modules lazy loading

Angular Modules and Lazy Loading

Posted Murari NayakLeave a commentPosted in Learning

This article on Angular Modules & Lazy Loading is part of the Learning Angular series. Understanding the App Module Imports are a language feature that tells the compiler to where to look for the files and features that are required.Modules are a part of Angular which it sees as a way of binding multiple things together.Modules are a bunch of codes bundled together and imported as a single statement in the imports array, thus minizing the number of codes that are written in the AppModule.Everything provided in providers array in the AppModule gives a single instance on which the whole app works.Bootstrap  … [Read More]

http interceptor

HTTP Interceptor in Angular

Posted Murari NayakLeave a commentPosted in Learning

This article on HTTP Interceptor in Angular is part of the Learning Angular series. Typically when we want to do soemthing with every request, it can be passe on to be done by an interceptor. In the current application case, the firebase auth token in the params.auth.interceptor.ts import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from ‘@angular/common/http’; import { Observable } from ‘rxjs/Observable’; export class AuthInterceptor implements HttpInterceptor { intercept(req: HttpRequest, next: HttpHandler): Observable<HttpEvent> { console.log(‘Intercepted ‘, req); return next.handle(req); } } HttpHandler gives a special method to let the request continue its journer\y, and if not done, the request won’t proceed.Now to  … [Read More]

httpclient

Making HTTP Requests in Angular (HTTPClient)

Posted Murari NayakLeave a commentPosted in Learning

This article on Making HTTP Requests in Angular is part of the Learning Angular series. MUST READ: Angular 6 and HTTP Angular 6 is currently the latest version of Angular and it deprecates the Http-access method taught in this module.What does this mean?It means that the method still works, still is secure – you can use it! But there is a better Http module to use now: HttpClient.I added a module (section 23) on that new client months ago, even before Angular 5 was released. You’ll meet it later in the course and we’ll easily update all our Http calls with the  … [Read More]

angular pipes

Pipes in Angular

Posted Murari NayakLeave a commentPosted in Learning

This article on Pipes in Angular is part of the Learning Angular series. Introduction and Why Pipes are Useful Pipes are used to transform the output.For a case where one has a name as a string ‘Max’ and wants to output all in uppercase without making it uppercase throughotut the application.It would be better to modify the value just on display. For that one can use a builtin pipe ‘uppercase’Using it is simple {{ username | uppercase }} This would transform the username in whatever case to uppercase just for displaying and without affecting the original valueAs the job of a pipe  … [Read More]

angular forms template driven reactive

Angular Forms (Template Driven, Reactive)

Posted Murari NayakLeave a commentPosted in Learning

This article on Angular Forms is part of the Learning Angular series. A typical structure how Angular handles forms { value: { name: ‘Murari’, email: ‘someone@gmail.com’ }, valid: true } Template Driven (TD) vs Reactive Approach Template Driven – Angular infers the Form Object from the DOM.Reactive Approach – Form is created programmatically as well as in the HTML, giving more granular control over the form. TD: Creating the Form and Registering the Controls Import the FormsModule in the AppComopnent importsThis will make sure that Angular is able to parse any form tag that is available in the HTML.Considering an example form:  … [Read More]

rxjs angular subject observable

RxJS in Angular (Observables, Subjects)

Posted Murari NayakLeave a commentPosted in Learning

This article on RxJS in Angular is part of the Learning Angular series. Angular 6 and RxJS 6 If one is using Angular 6 and RxJS 6, and want to have their older codes work, need to use rxjs-compatnpm install rxjs-compat –save Analyzing a built-in Angular Observable A subscriber takes in 3 parameters as follows: this.route.params.subscribe( () => {}, // On Result () => {}, // On Error () => {} // On Complete ); Building and Using a First Simple Observable // Create this app import { Observable } from ‘rxjs/Observable’; import ‘rxjs/Rx’; // This provides some utility functions for use.  … [Read More]

routing guards

Angular Routing and Guards

Posted Murari NayakLeave a commentPosted in Learning

This article on Routing in Angular is part of the Learning Angular series. In the app, we will have 3 sections:1. Home2. Servers– View and Edit Servers– A service is used to load and update Servers3. Users– View users. Setting Up and Loading Routes In the AppModule import { Routes, RouterModel } from ‘@angular/router’; const appRoutes:Routes = [ {path: ”, component: HomeComponent}, {path: ‘users’, component: UsersComponent}, {path: ‘servers’, component: ServersComponent} ] In the imports, add RouterModule.forRoot(appRoutes) Add directive to the place where you want to render the routed views. <div class=”row”> <router-outlet></router-outlet> </div> Navigating with Router Links And in <a> tags, pass  … [Read More]

angular services

Services in Angular (Dependency Injection)

Posted Murari NayakLeave a commentPosted in Learning

This article on Services in Angular is part of the Learning Angular series. To write reusable tasks that can be used across multiple components. This is called as Services in Angular.Duplication of Code and Data persistence are two use-cases of Services in Angular. Why would you need Services When app becomes large, it is very difficult to manage the code and replicate them at multiple places. Services come to rescue. Creating a Logging Service A Service file is just a normal Typescript file and doesn’t need any declaration like that of @Component or @Directive.One can import, initialize and access the functions in  … [Read More]

component lifecycle

Component Lifecycle in Angular

Posted Murari NayakLeave a commentPosted in Learning

This article on Component Lifecyle in Angular is part of the Learning Angular series. Understanding the Component Lifecycle ngOnChanges – Called after a bound input property changes. Called during initialization. Called multiple times. ngOnInit – Called when the component is initialized. it will run after the constructor ngDoCheck – Called during every change detection run ngAfterContentInit – Called after content (ng-content) has been projected into view ngAfterContentChecked – Called every time the projected component has been checked. ngAfterViewInit – Called after the components view and its children view has been initialized ngAfterViewChecked – Called every time the view and child views have  … [Read More]