All I'm trying to do is get my head around Angular 2 syntax. The examples I find seem to use different methods.
Look at foo:
Is this how I set up every single variable I want to use?
I define it using : syntax, and specify its type? Then later I refer to it with this.?
export class SwitchClientComponent implements OnInit {
filterString: string = '';
foo: string ='';
ngOnInit() {
this.foo = localStorage.getItem('bar') || '!';
}
.
<span>[{{foo}}]</span>
Please refer to the Angular 2 Docs, there's a section about Template Variables
Interpolation
The way you show a variable in the template using {{}} is called interpolation.
<h3>
The title is: {{title}}
<img src="{{heroImageUrl}}" style="height:30px">
</h3>
As you see you can use interpolated variables even in attributes, even mixed to static Text
Attribute Binding
Some attributes can be surrounded by square brackets which tells Angular to bind the value passed to that variable. In this case you don't need to use the {{}} syntax.
<img [src]="heroImageUrl">
Template Expressions
Also you can perform expressions and use the returning value of functions
<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>
Of course getVal() will be a function that needs to be defined as public in the component.
Local Template Variables
Also keep in mind you can define template variables on the fly, for example using an ngFor directive
<div *ngFor="let hero of heroes">{{hero.name}}</div>
In this example hero is not defined in the Component (and will NOT be visible inside the component class by calling this.hero) but it will be local to the context of the ngFor block. Meaning: all the children elements of the div containing ngFor.
The array heores instead need to exist and be public in the Component. As you can see in this case you don't need to use the {{}} syntax. This is because Angular is already expecting a variable there and automatically interpolates anything you will put in there.
<input #heroInput> {{heroInput.value}}
This syntax instead provides a reference to the input DOM element.
heroInput will then be visible inside the template but cannot be accessed directly from inside the component (there is a way to use it from the component though).
There are some more rules around but reading that article should give you all the info you need.
Define Component public variables
The component to use all the examples above would look like this:
export class MyComponent {
title: string = 'My title';
heroImageUrl: string ='http://www.myurl.com/img.jpg';
heroes: any[] = [{name: 'a'}, {name: 'b'}];
getVal() {
return 3;
}
}
It should be just {{foo}} without the square brackets []
<span>{{foo}}</span>
