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!!
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
