All geek questions in one place

How to bind angular 2 expression and typescript

What I'm trying to do is show the full name when the first and last name are entered.

It works:

<h1 [hidden]="!firstName || !lastName">Hello {{lastName + ', ' + firstName}}!</h1>

This does not work (what is the correct way to call the method defined in the class?):

 <!--h1 [hidden]="!firstName || !lastName">Hello {{fullName()}}!</h1!-->

This also does not work:

 <button ng-click="alertFullName()">show full name</button>

Here are the files: index.html:

 <!DOCTYPE html> <html> <head> <title>Angular 2 QuickStart</title> <!-- 1. Load libraries --> <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script> <script src="https://code.angularjs.org/tools/typescript.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script> <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script> <!-- 2. Configure SystemJS --> <script> System.config({ transpiler: 'typescript', typescriptOptions: { emitDecoratorMetadata: true }, packages: {'src': {defaultExtension: 'ts'}} }); </script> <!-- 3. Bootstrap --> <script> System.import('angular2/platform/browser').then(function(ng){ System.import('src/hello_world').then(function(src) { ng.bootstrap(src.HelloWorld); }); }); </script> </head> <!-- 4. Display the application --> <body> <hello-world>Loading...</hello-world> </body> </html>

SIC / hello_world.html:

 <label>Name:</label> <input type="text" [(ngModel)]="firstName" placeholder="Enter first name here"> <input type="text" [(ngModel)]="lastName" placeholder="Enter last name here"> <hr> <h1 [hidden]="!firstName || !lastName">Hello {{lastName + ', ' + firstName}}!</h1> <!--h1 [hidden]="!firstName || !lastName">Hello {{fullName()}}!</h1!--> <button ng-click="alertFullName()">show full name</button>

SRC / hello_world.ts:

 import {Component} from 'angular2/core'; @Component({ // Declare the tag name in index.html to where the component attaches selector: 'hello-world', // Location of the template for this component templateUrl: 'src/hello_world.html' }) export class HelloWorld { firstName: string = ''; lastName: string = ''; function fullName(): string { return firstName + ', ' + lastName; } function alertFullName() { alert(firstName + ', ' + lastName); } }
+5
source share
3 answers

In addition to what Günter Zöchbauer wrote (i.e. use (click) , not ng-click ), this code

 function fullName(): string { return firstName + ', ' + lastName; } function alertFullName() { alert(firstName + ', ' + lastName); }

it should be

 fullName():string { return this.firstName + ', ' + this.lastName; } alertFullName() { alert(this.firstName + ', ' + this.lastName); }
+2
source

it

 <button ng-click="alertFullName()">show full name</button>

it should be

 <button (click)="alertFullName()">show full name</button>

This works great for me.

 <h1 [hidden]="!firstName || !lastName">Hello {{fullName()}}!</h1>

(I had to change the expression "!firstName || !lastName" because I use Dart and there the null check must be explicit)

+1
source

If we look at the documentation for the Angular 2 template , we can see that interpolation in the form {{bindMe}} can only bind to properties:

Expressions can only be used to bind to properties. Expressions are representations of predicted data to represent. Expressions should not have a side effect and should be idempotent.

This means that the following example is "illegal" because it is a function call:

 <h1 [hidden]="!firstName || !lastName">Hello {{fullName()}}!</h1>

Instead, you can get getter fullName , which returns the desired value:

 export class HelloWorld { firstName: string = ''; lastName: string = ''; get fullName () { return firstName + ' ' + lastName; } }

And then consume fullName in the template:

 <h1 [hidden]="!fullName.length">Hello {{fullName}}!</h1>
+1
source

Source: https://habr.com/ru/post/1239091/

More articles:


All Articles