How To Create and Use Templates in
Angular 5 or 4 using Visual Studio Code?
Let’s start about Templates system in
Angular 5 and 4. As you know, Angular 2 using the
template tag <template> but in
Angular 4+ using to <ng-template>
</ng-template>.
We can shay that the Angular 4 changed <template> to <ng-template>. This is the biggest
changes of Angular.
Lest start an example and see “how
looks like” –
user.component.html-
<div><h2>Angular
4 and 5 Templates</h2></div>
<div>
<div
*ngIf = "isAciveFlag;then
cond1 else cond2">Condition is valid.</div>
<ng-template
#cond1>Template
Cond1 - This is the 1st condition and its valid.</ng-template>
<ng-template
#cond2>Template
Cond2 - This is 2nd condition and its not valid.</ng-template>
</div>
In the above code (user.component.html),
I created a variable “isAciveFlag =
true” and the value is “true”. The
value is “true” that means the first condition is “true” and the result printed to “Template Cond1 - This is the 1st
condition and it’s valid.”
The Result looks like –
user.component.ts -
import
{ Component, OnInit
} from '@angular/core';
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
export
class UserComponent
implements OnInit
{
//constructor() { }
isAciveFlag = true;
//User List Array
users =['ANil
Singh', 'Alok SIngh',
'Raju', 'Sunny','Mark'
,'Indian'];
//This is the web link Array;
webliks =['https://code-sample.com',
'https://code-sample.xyz',
'http://code-view.com'];
ngOnInit() {
}
clickEvents(event)
{
console.log(event);
alert("Yes,
You Clicked Me! Thanks you.");
}
}
app.module.ts -
import
{ BrowserModule } from
'@angular/platform-browser';
import
{ NgModule } from
'@angular/core';
import
{RouterModule} from
'@angular/router';
//Added RouterModule
import
{ AppComponent } from
'./app.component';
import
{ UserComponent } from
'./user/user.component';
import
{ Component } from
'@angular/core/src/metadata/directives';
@NgModule({
declarations: [
AppComponent,
UserComponent
],
imports: [
BrowserModule,
RouterModule.forRoot([{
//Added Router Module root path and component
path:'web-link',
component: UserComponent
}
])
],
providers: [],
bootstrap: [AppComponent]
})
export
class AppModule
{ }
I hope you are enjoying with this post!
Please share with you friends. Thank you!!