Passing values using @ViewChild Angular 4

Passing values using @ViewChild Angular 4: @ViewChild in angular is mainly to communicate between parent and child components. Because a component will have access only to its own template files. We have few more components like @Input and @Output for the same. Today we are going to see actually how to pass a value within a same component itself using

348 total views, 2 views today

» Read more

Property binding angular 4 example

Property binding angular 4 example: What is property binding ? Binding html properties like disabled[disabled], class[ngClass] and style[ngStyle] dynamically with component values using angular. You can even create your own custom property using @Input. Syntax: [] Eg: [disabled]   Property binding Types: Element property Component property Directive property In our last tutorial we have seen about event binding and twoway

368 total views, 1 views today

» Read more

Angular 4 Event Binding + Two Way Databinding Simple Example

Angular 4 Event Binding + Two Way Databinding Simple Example What is Event Binding ? Event Binding in angular adds an event handler which will be triggered on the added event action. For example: <button (click) = “addMe()”> Add Me </button>   Here (click) is a click event in angular binded to addMe() method, so when ever user clicks Add

220 total views, 1 views today

» Read more

String Interpolation {{}} in Angular 4 – Must to know Things

String Interpolation {{}} in Angular 4 – Must to know Things: String interpolation is basically used to output the values from the typescript file to template file. Whenever you want to dynamically display the values through backends/http requests/from DB then you can make use of this string interpolation to directly output your contents to templates. But know the things mentioned

168 total views, no views today

» Read more

Tools for Angular 4 Developments

As angular 4 becoming very popular, same time typescript and development text editors like atom and sublime is also becoming very popular.   Angular 4 Development Editors & Tools:   1. Microsoft Visual Studio Code It is free from microsoft. Visual Studio Download Link: Download Microsoft Visual Studio Code     2. Atom Atom is text editor from github team.

191 total views, no views today

» Read more

How to use Angular 2 Material in Angular 4/Angular-CLI

How to use Angular 2 Material in Angular 4/Angular-CLI: Angular material is a CSS framework like bootstrap for angular projects. As both are developed by google there will be more convenient in the integration part rather than other CSS frameworks like bootstrap/foundation etc. In order to use angular material in angular 4 you need to complete the below 5 steps process,

225 total views, 1 views today

» Read more

[Resolved] Cannot find module ‘@angular/animations’

[Resolved] Cannot find module ‘@angular/animations’ When you are using angular material with angular 4 then you will come across this error “Cannot find module ‘@angular/animations’“. In angular 2 when you install angular material angular animations also will be installed and imported from core. but now in angular 4 angular animation is moved to a separate package and angular/core is deprecated.

177 total views, 1 views today

» Read more

Angular 4 Router Simple Example & Demo

Angular 4 Router Simple Example & Demo: Router is one of the great feature available in angular to bring the content without refreshing the page. Here we are going to have three links namely home, login and register. On click of each link a new content will be displayed only in that particular area without refreshing the full page.  

465 total views, no views today

» Read more

How to add Bootstrap 4 to Angular-CLI project ?

How to add Bootstrap 4 to Angular-CLI project ? Basically bootstrap can be configured in angularjs 2 or angular-cli through ng-bootstrap or directly using bootstrap. Here we are going to see how to add bootstrap 4 to angular-cli project. Prerequest: Node js should be installed in your machine.   Read how to install Node JS here, How to install Node JS

258 total views, no views today

» Read more