Angular interpolation скачать в хорошем качестве

Angular interpolation

Text version of the video http://csharp-video-tutorials.blogspo... Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.    / @aarvikitchen5572   Slides http://csharp-video-tutorials.blogspo... Angular 2 Tutorial playlist    • Angular 2 tutorial for beginners   Angular 2 Text articles and slides http://csharp-video-tutorials.blogspo... All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenka... All Dot Net and SQL Server Tutorials in Arabic    / kudvenkatarabic   In this video we will discuss the concept of Interpolation in Angular. Interpolation is all about data binding. In Angular data-binding can be broadly classified into 3 categories. One way data-binding - From Component to View Template One way data-binding - From View Template to Component Two way data-binding - From Component to View Template & From View template to Component In this video, we will discuss the first one way data-binding i.e From Component to View Template. We achieve this using interpolation. We will discuss the rest of the 2 data-binding techniques in our upcoming videos. One way data-binding - From Component to View Template : To display read-only data on a view template we use one-way data binding technique interpolation. With interpolation, we place the component property name in the view template, enclosed in double curly braces: {{propertyName}}. In the following example, Angular pulls the value of the firstName property from the component and inserts it between the opening and closing [h1] element. import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` [h1]{{ firstName }}[/h1] ` }) export class AppComponent { firstName: string = 'Tom'; } It is also possible to concatenate a hard-coded string with the property value [h1]{{'Name = ' + firstName}}[/h1] The above expression displayes "Name = Tom" in the browser. You can specify any valid expression in double curly braces. For example you can have [h1]{{ 10 + 20 + 30 }}[/h1] The above expression evaluates to 60 The expression that is enclosed in double curly braces is commonly called as Template Expression. This template expression can also be a ternary operator as shown in the example below. Since firstName property has a value 'Tom', we see it in the browser. import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` [h1]{{firstName ? firstName : 'No name specified'}}[/h1] ` }) export class AppComponent { firstName: string = 'Tom'; } If we set firstName = null as shown below. The value 'No name specified' is displayed in the browser firstName: string = null; You can also use interpolation to set [img] src property import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `[div] [h1]{{pageHeader}}[/h1] [img src='{{imagePath}}'/] [/div]` }) export class AppComponent { pageHeader: string = 'Employee Details'; imagePath: string = 'http://pragimtech.com/images/logo.jpg'; } We can also call class methods using interpolation as shown below. import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `[div] [h1]{{'Full Name = ' + getFullName()}}[/h1] [/div]` }) export class AppComponent { firstName: string = 'Tom'; lastName: string = 'Hopkins'; getFullName(): string { return this.firstName + ' ' + this.lastName; } } Output : Full Name = Tom Hopkins