Skip to main content

Posts

Showing posts with the label Angular 2 Components

How would you Optimize the Angular 2 Application for Better Performance?

The optimizations are depends on the size of applications, type and other factors but normally we consider following optimizing points i.e. 1.          Consider AOT compilation. 2.          Consider lazy loading instead of fully bundled app if the app size is more. 3.          Keep in mind, your application is bundled and disfeatured. 4.          Keep in mind, your application doesn’t have un-necessary import statements. 5.          Keep in mind, your application’s 3rd party unused library. If exist and not used, removed from your application. 6.          Remove your application dependencies if not required. Stayed Informed   –   Angular 2 Tutorials | Angular 2 Quick Start Docs   I hope you are enjoying with thi...

TypeScript Tutorial for Beginners - The Fundamental Concepts!

TypeScript Interview Questions and Answers TypeScript - What Is? Typescript - Why Use? TypeScript - Setup and Install TypeScript - Variable TypeScript - Interface TypeScript - Optional Properties TypeScript - Constructor Parameters TypeScript - Functions TypeScript - Default Parameters TypeScript - Anonymous Functions TypeScript - Named Function TypeScript - Lambda/Arrow Functions TypeScript - Optional Parameters TypeScript - Rest Parameters Angular 2 Tutorials and Examples TypeScript - Modifiers TypeScript - Method Overriding TypeScript - Inheritance TypeScript - Class TypeScript - Types TypeScript - Pros and Cons! TypeScript - Modules TypeScript - Internal Modules TypeScript - External Modules TypeScript - Exports Modules Module vs. Namespace Export vs. Default TypeScript - Default Exports TypeScript - Export Keyword TypeScript Interview Q/A JavaScript What is Object in JavaScript? What is the P...

Angular 2  Component Lifecycle Hooks [Examples Also]

The common questions ask bye most of Angular 2 lovers, “ Could anyone tell me about the usage of ngOnInit if we already have a constructor? ” but Angular 2 provides life cycle hook ngOnInit by default. Angular 2 Components and Directives has multiple life-time hooks where we custom logic can be executed. Stayed Informed - What Are Components in Angular 5,4 and 2? Angular 2 Constructors :- The constructor is a default method runs when component is being constructed. The constructor is a typescript feature and it is used only for a class instantiations and nothing to do with Angular 2. The constructor called first time before the ngOnInit(). Example as , import {Component} from 'angular2/core' ; import {UserService} from './userService' ; @Component ({ selector: ‘ list - user ’ , template: `<ul><li *ngFor="#user of users">{{user.name}}</li></ul>` }) class App_Component { users:...

7 Best Key Differences - Constructor Vs. ngOnInit [Angular 2]

Angular 2 Constructors:- 1.       The   constructor   is a default method runs when component is being constructed. 2.       The constructor is a typescript   feature   and it is used only for a class   instantiations   and nothing to do with Angular 2. 3.       The constructor called first time before the   ngOnInit (). Stayed Informed   -  13 Best Advantages for Angular 2 Angular 2 ngOnInit :- 1.       The   ngOnInit   event is an Angular 2 life-cycle event method that is called after the first ngOnChanges and the ngOnInit method is use to parameters defined with @ Input   otherwise the constructor is   OK . 2.       The   ngOnInit   is called after the constructor and ngOnInit is called after the first ngOnChanges. 3.       The ...

When will ngInit be called? How would you make use of ngOnInit()?

In Angular 1.x, ngInit is called when template is re-rendered. In other words “ ng-init ” is called, when I take turns back to a page. In Angular2, there is no “ ng-init ” but we can create a ways like this using the directive and ngOnInit class.  Angular 2 provides life cycle hook ngOnInit by default. The ngOnInit is invoked when the component is initialized and invoked only once when the directive is instantiated. It is a best practice to implement these life-cycle interfaces. Stayed Informed  -  13 Best Advantages for Angular 2 According to Angular2 Doc,  “The ngOnInit is called right after the directive's data-bound properties have been checked for the first time, and before any of its children have been checked. It is invoked only once when the directive is instantiated.” For example as, import { Directive, Input } from '@angular/core' ; @ Directive({ selector : '[ngInit]' }) class NgInit { @ Input() ngInit; ngOnInit() {...

Kendo UI Angular 2 Grid Filter [How To]

“How To Use Kendo UI Grid with Angular 2 ”? The Kendo UI Grid is used to displays data in a tabular format and provides a full configurations options and the following example of Kendo Grid as given below, Stayed Informed – Live PLUNKER Demo Link Stayed Informed –  Angular 2 Tutorials and Examples Example as Source code as, Angular 2 Component source as, import { Component } from '@angular/core' ; import { products } from './products' ; @ Component({ selector : 'my-app' , template : ` < kendo - grid [data] = "gridData" [height] = "370" > < kendo - grid - column field = "ProductID" title = "ID" width = "40" > < /kendo-grid-column> < kendo - grid - column field = "ProductName" title = "Name" width = "250" > < /kendo-grid-column> < kend...