-
Angular is a TypeScript-based open-source front-end platform that makes it easy to build applications with in web/mobile/desktop. The major features of this framework such as declarative templates, dependency injection, end to end tooling, and many more other features are used to ease the development.
-
Angular is a completely revived component-based framework in which an application is a tree of individual components.
Some of the major difference in tabular form
AngularJS Angular It is based on MVC architecture This is based on Service/Controller It uses JavaScript to build the application Introduced the TypeScript to write the application Based on controllers concept This is a component based UI approach Not a mobile friendly framework Developed considering mobile platform Difficulty in SEO friendly application development Ease to create SEO friendly applications
-
TypeScript is a typed superset of JavaScript created by Microsoft that adds optional types, classes, async/await, and many other features, and compiles to plain JavaScript. Angular built entirely in TypeScript and used as a primary language.
You can install it globally as
Let's see a simple example of TypeScript usage,
npm install -g typescript
The greeter method allows only string type as argument.function greeter(person: string) { return "Hello, " + person; } let user = "Sudheer"; document.body.innerHTML = greeter(user);
-
Components are the most basic UI building block of an Angular app which formed a tree of Angular components. These components are subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template.
Let's see a simple example of Angular component
import { Component } from '@angular/core'; @Component ({ selector: 'my-app', template: ` <div> <h1>{{title}}</h1> <div>Learn Angular6 with examples</div> </div> `, }) export class AppComponent { title: string = 'Welcome to Angular world'; }
-
A template is a HTML view where you can display data by binding controls to properties of an Angular component. You can store your component's template in one of two places. You can define it inline using the template property, or you can define the template in a separate HTML file and link to it in the component metadata using the @Component decorator's templateUrl property.
Using inline template with template syntax,
import { Component } from '@angular/core'; @Component ({ selector: 'my-app', template: ' <div> <h1>{{title}}</h1> <div>Learn Angular</div> </div> ' }) export class AppComponent { title: string = 'Hello World'; }
Using separate template file such as app.component.html
import { Component } from '@angular/core'; @Component ({ selector: 'my-app', templateUrl: 'app/app.component.html' }) export class AppComponent { title: string = 'Hello World'; }
-
Data binding is a core concept in Angular and allows to define communication between a component and the DOM, making it very easy to define interactive applications without worrying about pushing and pulling data. There are four forms of data binding(divided as 3 categories) which differ in the way the data is flowing.
-
From the Component to the DOM:
Interpolation: {{ value }}: Adds the value of a property from the component
<li>Name: {{ user.name }}</li> <li>Address: {{ user.address }}</li>
Property binding: [property]=”value”: The value is passed from the component to the specified property or simple HTML attribute
<input type="email" [value]="user.email">
-
From the DOM to the Component: Event binding: (event)=”function”: When a specific DOM event happens (eg.: click, change, keyup), call the specified method in the component
<button (click)="logout()"></button>
-
Two-way binding: Two-way data binding: [(ngModel)]=”value”: Two-way data binding allows to have the data flow both ways. For example, in the below code snippet, both the email DOM input and component email property are in sync
<input type="email" [(ngModel)]="user.email">
-
-
Binding types can be grouped into three categories distinguished by the direction of data flow. They are listed as below,
- From the source-to-view
- From view-to-source
- View-to-source-to-view
The possible binding syntax can be tabularized as below,
| Data direction | Syntax | Type | |---- | --------- | ---- | | From the source-to-view(One-way) | 1. {{expression}} 2. [target]="expression" 3. bind-target="expression" | Interpolation, Property, Attribute, Class, Style| | From view-to-source(One-way) | 1. (target)="statement" 2. on-target="statement" | Event | | View-to-source-to-view(Two-way)| 1. [(target)]="expression" 2. bindon-target="expression"| Two-way |
-
Angular application goes through an entire set of processes or has a lifecycle right from its initiation to the end of the application. The representation of lifecycle in pictorial representation as follows,
The description of each lifecycle method is as below,
- ngOnChanges: When the value of a data bound property changes, then this method is called.
- ngOnInit: This is called whenever the initialization of the directive/component after Angular first displays the data-bound properties happens.
- ngDoCheck: This is for the detection and to act on changes that Angular can't or won't detect on its own.
- ngAfterContentInit: This is called in response after Angular projects external content into the component's view.
- ngAfterContentChecked: This is called in response after Angular checks the content projected into the component.
- ngAfterViewInit: This is called in response after Angular initializes the component's views and child views.
- ngAfterViewChecked: This is called in response after Angular checks the component's views and child views.
- ngOnDestroy: This is the cleanup phase just before Angular destroys the directive/component.
-
TypeScript classes has a default method called constructor which is normally used for the initialization purpose. Whereas ngOnInit method is specific to Angular, especially used to define Angular bindings. Even though constructor getting called first, it is preferred to move all of your Angular bindings to ngOnInit method. In order to use ngOnInit, you need to implement OnInit interface as below,
export class App implements OnInit{ constructor(){ //called first time before the ngOnInit() } ngOnInit(){ //called after the constructor and called after the first ngOnChanges() } }
-
Directives add behaviour to an existing DOM element or an existing component instance.
import { Directive, ElementRef, Input } from '@angular/core'; @Directive({ selector: '[myHighlight]' }) export class HighlightDirective { constructor(el: ElementRef) { el.nativeElement.style.backgroundColor = 'yellow'; } }
Now this directive extends HTML element behavior with a yellow background as below
<p myHighlight>Highlight me!</p>
-
We use Angular ngFor directive in the template to display each item in the list. For example, here we iterate over list of users,
The user variable in the ngFor double-quoted instruction is a template input variable
<li *ngFor="let user of users"> {{ user }} </li>
-
Sometimes an app needs to display a view or a portion of a view only under specific circumstances. The Angular ngIf directive inserts or removes an element based on a truthy/falsy condition. Let's take an example to display a message if the user age is more than 18,
Note: Angular isn't showing and hiding the message. It is adding and removing the paragraph element from the DOM. That improves performance, especially in the larger projects with many data bindings.
<p *ngIf="user.age > 18">You are not eligible for student pass!</p>
-
What is the purpose of hidden property?
The hidden property is used to show or hide the associated DOM element, based on an expression. It can be compared close to
ng-showdirective in AngularJS. Let's say you want to show user name based on the availability of user usinghiddenproperty.<div [hidden]="!user.name"> My name is: {{user.name}} </div>
-
What is the difference between ngIf and hidden property?
The main difference is that *ngIf will remove the element from the DOM, while [hidden] actually plays with the CSS style by setting
display:none. Generally it is expensive to add and remove stuff from the DOM for frequent actions. -
In a short note, A component(@component) is a directive-with-a-template.
Some of the major differences are mentioned in a tabular form
| Component | Directive | |---- | --------- | To register a component we use @Component meta-data annotation | To register directives we use @Directive meta-data annotation | | Components are typically used to create UI widgets| Directive is used to add behavior to an existing DOM element | | Component is used to break up the application into smaller components| Directive is use to design re-usable components| | Only one component can be present per DOM element | Many directives can be used per DOM element | | @View decorator or templateurl/template are mandatory | Directive doesn't use View|
-
A service is used when a common functionality needs to be provided to various modules. Services allow for greater separation of concerns for your application and better modularity by allowing you to extract common functionality out of components.
Let's create a repoService which can be used across components,
import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; @Injectable({ // The Injectable decorator is required for dependency injection to work // providedIn option registers the service with a specific NgModule providedIn: 'root', // This declares the service with the root app (AppModule) }) export class RepoService{ constructor(private http: Http){ } fetchAll(){ return this.http.get('https://api.github.com/repositories'); } }
The above service uses Http service as a dependency.
-
Modules are logical boundaries in your application and the application is divided into separate modules to separate the functionality of your application. Lets take an example of app.module.ts root module declared with @NgModule decorator as below,
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule ({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ], providers: [] }) export class AppModule { }
The NgModule decorator has five important(among all) options
- The imports option is used to import other dependent modules. The BrowserModule is required by default for any web based angular application
- The declarations option is used to define components in the respective module
- The bootstrap option tells Angular which Component to bootstrap in the application
- The providers option is used to configure set of injectable objects that are available in the injector of this module.
- The entryComponents option is a set of components dynamically loaded into the view.
- Dependency injection (DI), is an important application design pattern in which a class asks for dependencies from external sources rather than creating them itself. Angular comes with its own dependency injection framework for resolving dependencies( services or objects that a class needs to perform its function).So you can have your services depend on other services throughout your application.
-
A pipe takes in data as input and transforms it to a desired output. For example, let us take a pipe to transform a component's birthday property into a human-friendly date using date pipe.
import { Component } from '@angular/core'; @Component({ selector: 'app-birthday', template: `<p>Birthday is {{ birthday | date }}</p>` }) export class BirthdayComponent { birthday = new Date(1987, 6, 18); // June 18, 1987 }
-
RxJS is a library for composing asynchronous and callback-based code in a functional, reactive style using Observables. Many APIs such as HttpClient produce and consume RxJS Observables and also uses operators for processing observables.
For example, you can import observables and operators for using HttpClient as below,
import { Observable, throwError } from 'rxjs'; import { catchError, retry } from 'rxjs/operators';
- Observables are declarative which provide support for passing messages between publishers and subscribers in your application. They are mainly used for event handling, asynchronous programming, and handling multiple values. In this case, you define a function for publishing values, but it is not executed until a consumer subscribes to it. The subscribed consumer then receives notifications until the function completes, or until they unsubscribe.
-
An Observable is a unique Object similar to a Promise that can help manage async code. Observables are not part of the JavaScript language so we need to rely on a popular Observable library called RxJS. The observables are created using new keyword.
Let see the simple example of observable,
import { Observable } from 'rxjs'; const observable = new Observable(observer => { setTimeout(() => { observer.next('Hello from a Observable!'); }, 2000); });
-
An Observable instance begins publishing values only when someone subscribes to it. So you need to subscribe by calling the subscribe() method of the instance, passing an observer object to receive the notifications.
Let's take an example of creating and subscribing to a simple observable, with an observer that logs the received message to the console.
Creates an observable sequence of 5 integers, starting from 1 const source = range(1, 5); // Create observer object const myObserver = { next: x => console.log('Observer got a next value: ' + x), error: err => console.error('Observer got an error: ' + err), complete: () => console.log('Observer got a complete notification'), }; // Execute with the observer object and Prints out each item source.subscribe(myObserver); // => Observer got a next value: 1 // => Observer got a next value: 2 // => Observer got a next value: 3 // => Observer got a next value: 4 // => Observer got a next value: 5 // => Observer got a complete notification
-
Below are the list of differences between promise and observable,
Observable Promise Declarative: Computation does not start until subscription so that they can be run whenever you need the result Execute immediately on creation Provide multiple values over time Provide only one Subscribe method is used for error handling which makes centralized and predictable error handling Push errors to the child promises Provides chaining and subscription to handle complex applications Uses only .then() clause
-
You can handle errors by specifying an error callback on the observer instead of relying on try/catch which are ineffective in asynchronous environment.
For example, you can define error callback as below,
myObservable.subscribe({ next(num) { console.log('Next num: ' + num)}, error(err) { console.log('Received an errror: ' + err)} });
- Angular Router is a mechanism in which navigation happens from one view to the next as users perform application tasks. It borrows the concepts or model of browser's application navigation.
-
The RouterOutlet is a directive from the router library and it acts as a placeholder that marks the spot in the template where the router should display the components for that outlet. Router outlet is used like a component,
<router-outlet></router-outlet> <!-- Routed components go here -->
-
The RouterLink is a directive on the anchor tags give the router control over those elements. Since the navigation paths are fixed, you can assign string values to router-link directive as below,
<h1>Angular Router</h1> <nav> <a routerLink="/todosList" >List of todos</a> <a routerLink="/completed" >Completed todos</a> </nav> <router-outlet></router-outlet>
-
A router must be configured with a list of route definitions. You configures the router with routes via the
RouterModule.forRoot()method, and adds the result to the AppModule'simportsarray.const appRoutes: Routes = [ { path: 'todo/:id', component: TodoDetailComponent }, { path: 'todos', component: TodosListComponent, data: { title: 'Todos List' } }, { path: '', redirectTo: '/todos', pathMatch: 'full' }, { path: '**', component: PageNotFoundComponent } ]; @NgModule({ imports: [ RouterModule.forRoot( appRoutes, { enableTracing: true } // <-- debugging purposes only ) // other imports here ], ... }) export class AppModule { }
-
If the URL doesn't match any predefined routes then it causes the router to throw an error and crash the app. In this case, you can use wildcard route. A wildcard route has a path consisting of two asterisks to match every URL.
For example, you can define PageNotFoundComponent for wildcard route as below
{ path: '**', component: PageNotFoundComponent }
- No, the Routing Module is a design choice. You can skip routing Module (for example, AppRoutingModule) when the configuration is simple and merge the routing configuration directly into the companion module (for example, AppModule). But it is recommended when the configuration is complex and includes specialized guard and resolver services.
-
Angular offers two ways to compile your application,
- Just-in-Time (JIT)
- Ahead-of-Time (AOT)
-
Just-in-Time (JIT) is a type of compilation that compiles your app in the browser at runtime. JIT compilation is the default when you run the ng build (build only) or ng serve (build and serve locally) CLI commands. i.e, the below commands used for JIT compilation,
ng build ng serve
-
Ahead-of-Time (AOT) is a type of compilation that compiles your app at build time. For AOT compilation, include the
--aotoption with the ng build or ng serve command as below,ng build --aot ng serve --aot
Note: The ng build command with the --prod meta-flag (
ng build --prod) compiles with AOT by default.
- The Angular components and templates cannot be understood by the browser directly. Due to that Angular applications require a compilation process before they can run in a browser. For example, In AOT compilation, both Angular HTML and TypeScript code converted into efficient JavaScript code during the build phase before browser runs it.
-
Below are the list of AOT benefits,
- Faster rendering: The browser downloads a pre-compiled version of the application. So it can render the application immediately without compiling the app.
- Fewer asynchronous requests: It inlines external HTML templates and CSS style sheets within the application javascript which eliminates separate ajax requests.
- Smaller Angular framework download size: Doesn't require downloading the Angular compiler. Hence it dramatically reduces the application payload.
- Detect template errors earlier: Detects and reports template binding errors during the build step itself
- Better security: It compiles HTML templates and components into JavaScript. So there won't be any injection attacks.
- Angular's animation system is built on CSS functionality in order to animate any property that the browser considers animatable. These properties includes positions, sizes, transforms, colors, borders etc. The Angular modules for animations are @angular/animations and @angular/platform-browser and these dependencies are automatically added to your project when you create a project using Angular CLI.
-
You need to follow below steps to implement animation in your angular project,
- Enabling the animations module: Import BrowserAnimationsModule to add animation capabilities into your Angular root application module(for example, src/app/app.module.ts).
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule ], declarations: [ ], bootstrap: [ ] }) export class AppModule { }
- Importing animation functions into component files: Import required animation functions from @angular/animations in component files(for example, src/app/app.component.ts).
import { trigger, state, style, animate, transition, // ... } from '@angular/animations';
- Adding the animation metadata property: add a metadata property called animations: within the @Component() decorator in component files(for example, src/app/app.component.ts)
@Component({ selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.css'], animations: [ // animation triggers go here ] })
- Enabling the animations module: Import BrowserAnimationsModule to add animation capabilities into your Angular root application module(for example, src/app/app.module.ts).
-
Http Interceptors are part of @angular/common/http, which inspect and transform HTTP requests from your application to the server and vice-versa on HTTP responses. These interceptors can perform a variety of implicit tasks, from authentication to logging.
The syntax of HttpInterceptor interface looks like as below,
interface HttpInterceptor { intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> }
You can use interceptors by declaring a service class that implements the intercept() method of the HttpInterceptor interface.
@Injectable() export class MyInterceptor implements HttpInterceptor { constructor() {} intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { ... } }
After that you can use it in your module,
@NgModule({ ... providers: [ { provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true } ] ... }) export class AppModule {}
-
The HTTP Interceptors can be used for different variety of tasks,
- Authentication
- Logging
- Caching
- Fake backend
- URL transformation
- Modifying headers
-
When you are creating your project with angular cli, you can use
ng newcommand. It generates all your components with predefined sass files.ng new My_New_Project --style=sass
But if you are changing your existing style in your project then use
ng setcommand,ng set defaults.styleExt scss
When stylesheets are getting larger, more complex, and harder to maintain. This is where a CSS pre-processor can help. Sass (which stands for 'Syntactically awesome style sheets) is an extension of CSS that enables you to use things like variables, nested rules, inline imports and more. It also helps to keep things organised and allows you to create style sheets faster.
Sass works by writing your styles in .scss (or .sass) files, which will then get compiled into a regular CSS file. The newly compiled CSS file is what gets loaded to your browser to style your web application. This allows the browser to properly apply the styles to your web page.
Live Demo: Sass Example
Variables are useful for things like colors, fonts, font sizes, and certain dimensions, as you can be sure always using the same ones. Variables in SCSS start with $ sign
SCSS Style
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}CSS Style
body {
font: 100% Helvetica, sans-serif;
color: #333;
}When the Sass is processed, it takes the variables we define for the $font-stack and $primary-color and outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful when working with brand colors and keeping them consistent throughout the site.
Live Demo: Sass Variables
Basic nesting refers to the ability to have a declaration inside of a declaration.
SCSS Style
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}CSS Style
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}Live Demo: Sass Nesting
The partial Sass files contain little snippets of CSS that can be included in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @use rule.
This rule loads another Sass file as a module, which means we can refer to its variables, mixins, and functions in our Sass file with a namespace based on the filename. Using a file will also include the CSS it generates in your compiled output!
SCSS Style
// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}// styles.scss
@use 'base';
.inverse {
background-color: base.$primary-color;
color: white;
}CSS Style
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
.inverse {
background-color: #333;
color: white;
}A mixin provide to make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible.
SCSS Style
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.box { @include transform(rotate(30deg)); }CSS Style
.box {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}Live Demo: Sass Mixins
Using @extend lets you share a set of CSS properties from one selector to another.
SCSS Style
/* This CSS will print because %message-shared is extended. */
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
// This CSS won't print because %equal-heights is never extended.
%equal-heights {
display: flex;
flex-wrap: wrap;
}
.message {
@extend %message-shared;
}
.success {
@extend %message-shared;
border-color: green;
}
.error {
@extend %message-shared;
border-color: red;
}
.warning {
@extend %message-shared;
border-color: yellow;
}CSS Style
/* This CSS will print because %message-shared is extended. */
.message, .success, .error, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}Live Demo: Sass Inheritance
Sass has a handful of standard math operators like +, -, *, /, and %. In our example we're going to do some simple math to calculate widths for an aside & article.
SCSS Style
.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%;
}CSS Style
.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 62.5%;
}
aside[role="complementary"] {
float: right;
width: 31.25%;
}AngularJS Qustions: https://www.interviewbit.com/angularjs-interview-questions/#angularjs-vs-javascript