How to work with template choice in angular 6?
0
depending on the condition I want to display certain template.
if "this.showTemplateOrigDestReason = true" then it displays the template "#OriginDestinationReason" and so on...
changeTemplate(ruletagName) {
console.log(ruletagName)
if(ruletagName == 'OriginDestinationReason'){
this.showTemplateOrigDestReason = true;
}else if(ruletagName == 'inputList'){
this.showTemplateInputList = true;
}else{
this.showTemplateOrigDest = true;
}
}
}<ng-template #tagDescription >
<mat-chip-list class="mat-chip-list" *ngIf="!showTemplateOrigDestReason; else OriginDestinationReason " >
<mat-chip *ngFor="let tags of descriptionTags" (click)="changeTemplate(tags.ruleName)">
{{tags.nameTag}}
</mat-chip>
</mat-chip-list>
</ng-template>
<ng-template #InputListTag>
<mat-form-field fxFlex="30" >
<h1>InputListTag</h1>
</mat-form-field>
</ng-template>
<ng-template #OriginDestinationReason>
<mat-form-field fxFlex="30" >
<h1>OriginDestinationReason</h1>
</mat-form-field>
</ng-template>
<ng-template #OriginDestination>
<mat-form-field fxFlex="30" >
<h1>OriginDestination</h1>
</mat-form-field>
</ng-template>angular angular6 angular-material2
asked Nov 12 '18 at 11:40
Eliemerson Fonseca
286
add a comment |
0
depending on the condition I want to display certain template.
if "this.showTemplateOrigDestReason = true" then it displays the template "#OriginDestinationReason" and so on...
changeTemplate(ruletagName) {
console.log(ruletagName)
if(ruletagName == 'OriginDestinationReason'){
this.showTemplateOrigDestReason = true;
}else if(ruletagName == 'inputList'){
this.showTemplateInputList = true;
}else{
this.showTemplateOrigDest = true;
}
}
}<ng-template #tagDescription >
<mat-chip-list class="mat-chip-list" *ngIf="!showTemplateOrigDestReason; else OriginDestinationReason " >
<mat-chip *ngFor="let tags of descriptionTags" (click)="changeTemplate(tags.ruleName)">
{{tags.nameTag}}
</mat-chip>
</mat-chip-list>
</ng-template>
<ng-template #InputListTag>
<mat-form-field fxFlex="30" >
<h1>InputListTag</h1>
</mat-form-field>
</ng-template>
<ng-template #OriginDestinationReason>
<mat-form-field fxFlex="30" >
<h1>OriginDestinationReason</h1>
</mat-form-field>
</ng-template>
<ng-template #OriginDestination>
<mat-form-field fxFlex="30" >
<h1>OriginDestination</h1>
</mat-form-field>
</ng-template>angular angular6 angular-material2
asked Nov 12 '18 at 11:40
Eliemerson Fonseca
286
add a comment |
0
0
0
depending on the condition I want to display certain template.
if "this.showTemplateOrigDestReason = true" then it displays the template "#OriginDestinationReason" and so on...
changeTemplate(ruletagName) {
console.log(ruletagName)
if(ruletagName == 'OriginDestinationReason'){
this.showTemplateOrigDestReason = true;
}else if(ruletagName == 'inputList'){
this.showTemplateInputList = true;
}else{
this.showTemplateOrigDest = true;
}
}
}<ng-template #tagDescription >
<mat-chip-list class="mat-chip-list" *ngIf="!showTemplateOrigDestReason; else OriginDestinationReason " >
<mat-chip *ngFor="let tags of descriptionTags" (click)="changeTemplate(tags.ruleName)">
{{tags.nameTag}}
</mat-chip>
</mat-chip-list>
</ng-template>
<ng-template #InputListTag>
<mat-form-field fxFlex="30" >
<h1>InputListTag</h1>
</mat-form-field>
</ng-template>
<ng-template #OriginDestinationReason>
<mat-form-field fxFlex="30" >
<h1>OriginDestinationReason</h1>
</mat-form-field>
</ng-template>
<ng-template #OriginDestination>
<mat-form-field fxFlex="30" >
<h1>OriginDestination</h1>
</mat-form-field>
</ng-template>angular angular6 angular-material2
asked Nov 12 '18 at 11:40
Eliemerson Fonseca
286
depending on the condition I want to display certain template.
if "this.showTemplateOrigDestReason = true" then it displays the template "#OriginDestinationReason" and so on...
changeTemplate(ruletagName) {
console.log(ruletagName)
if(ruletagName == 'OriginDestinationReason'){
this.showTemplateOrigDestReason = true;
}else if(ruletagName == 'inputList'){
this.showTemplateInputList = true;
}else{
this.showTemplateOrigDest = true;
}
}
}<ng-template #tagDescription >
<mat-chip-list class="mat-chip-list" *ngIf="!showTemplateOrigDestReason; else OriginDestinationReason " >
<mat-chip *ngFor="let tags of descriptionTags" (click)="changeTemplate(tags.ruleName)">
{{tags.nameTag}}
</mat-chip>
</mat-chip-list>
</ng-template>
<ng-template #InputListTag>
<mat-form-field fxFlex="30" >
<h1>InputListTag</h1>
</mat-form-field>
</ng-template>
<ng-template #OriginDestinationReason>
<mat-form-field fxFlex="30" >
<h1>OriginDestinationReason</h1>
</mat-form-field>
</ng-template>
<ng-template #OriginDestination>
<mat-form-field fxFlex="30" >
<h1>OriginDestination</h1>
</mat-form-field>
</ng-template> changeTemplate(ruletagName) {
console.log(ruletagName)
if(ruletagName == 'OriginDestinationReason'){
this.showTemplateOrigDestReason = true;
}else if(ruletagName == 'inputList'){
this.showTemplateInputList = true;
}else{
this.showTemplateOrigDest = true;
}
}
}<ng-template #tagDescription >
<mat-chip-list class="mat-chip-list" *ngIf="!showTemplateOrigDestReason; else OriginDestinationReason " >
<mat-chip *ngFor="let tags of descriptionTags" (click)="changeTemplate(tags.ruleName)">
{{tags.nameTag}}
</mat-chip>
</mat-chip-list>
</ng-template>
<ng-template #InputListTag>
<mat-form-field fxFlex="30" >
<h1>InputListTag</h1>
</mat-form-field>
</ng-template>
<ng-template #OriginDestinationReason>
<mat-form-field fxFlex="30" >
<h1>OriginDestinationReason</h1>
</mat-form-field>
</ng-template>
<ng-template #OriginDestination>
<mat-form-field fxFlex="30" >
<h1>OriginDestination</h1>
</mat-form-field>
</ng-template> changeTemplate(ruletagName) {
console.log(ruletagName)
if(ruletagName == 'OriginDestinationReason'){
this.showTemplateOrigDestReason = true;
}else if(ruletagName == 'inputList'){
this.showTemplateInputList = true;
}else{
this.showTemplateOrigDest = true;
}
}
}<ng-template #tagDescription >
<mat-chip-list class="mat-chip-list" *ngIf="!showTemplateOrigDestReason; else OriginDestinationReason " >
<mat-chip *ngFor="let tags of descriptionTags" (click)="changeTemplate(tags.ruleName)">
{{tags.nameTag}}
</mat-chip>
</mat-chip-list>
</ng-template>
<ng-template #InputListTag>
<mat-form-field fxFlex="30" >
<h1>InputListTag</h1>
</mat-form-field>
</ng-template>
<ng-template #OriginDestinationReason>
<mat-form-field fxFlex="30" >
<h1>OriginDestinationReason</h1>
</mat-form-field>
</ng-template>
<ng-template #OriginDestination>
<mat-form-field fxFlex="30" >
<h1>OriginDestination</h1>
</mat-form-field>
</ng-template>angular angular6 angular-material2
angular angular6 angular-material2
asked Nov 12 '18 at 11:40
Eliemerson Fonseca
286
asked Nov 12 '18 at 11:40
Eliemerson Fonseca
286
asked Nov 12 '18 at 11:40
Eliemerson Fonseca
286
asked Nov 12 '18 at 11:40
Eliemerson Fonseca
286
asked Nov 12 '18 at 11:40
Eliemerson Fonseca
286
286
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
0
One way would be to simply use ruletagName with ngSwitch.
<ng-container [ngSwitch]="ruletagName">
<ng-container *ngSwitchCase="'tagDescription'"> ... </ng-container>
<ng-container *ngSwitchCase="'OriginDestinationReason'"> ... </ng-container>
...
</ng-container>
Here's a full example.
answered Nov 12 '18 at 12:18
sloth
72.9k14127168
add a comment |
0
Try using [ngIf] directive provided by Angular
<ng-template #InputListTag [ngIf]="showTemplateInputList">
<mat-form-field fxFlex="30" >
<h1>InputListTag</h1>
</mat-form-field>
</ng-template>
<ng-template #OriginDestinationReason [ngIf]="showTemplateOrigDestReason">
<mat-form-field fxFlex="30" >
<h1>OriginDestinationReason</h1>
</mat-form-field>
</ng-template>
<ng-template #OriginDestination [ngIf]="showTemplateOrigDest">
<mat-form-field fxFlex="30" >
<h1>OriginDestination</h1>
</mat-form-field>
</ng-template>
answered Nov 12 '18 at 11:49
Sarthak Aggarwal
64817
I need template #tagDescription to disappear and only get the template validated, it's possible?
– Eliemerson Fonseca
Nov 12 '18 at 11:56
can you please elaborate? which template you want to validate?
– Sarthak Aggarwal
Nov 12 '18 at 12:00
if user clicks the tags.nameTag [i] and it will be of type #inputList it will exude #InputListTag in place of #tagDescription
– Eliemerson Fonseca
Nov 12 '18 at 12:05
P.S. It's a better idea to usengIfas*ngIfinstead of square bindings.
– Edric
Nov 13 '18 at 10:12
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53261407%2fhow-to-work-with-template-choice-in-angular-6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
One way would be to simply use ruletagName with ngSwitch.
<ng-container [ngSwitch]="ruletagName">
<ng-container *ngSwitchCase="'tagDescription'"> ... </ng-container>
<ng-container *ngSwitchCase="'OriginDestinationReason'"> ... </ng-container>
...
</ng-container>
Here's a full example.
answered Nov 12 '18 at 12:18
sloth
72.9k14127168
add a comment |
0
One way would be to simply use ruletagName with ngSwitch.
<ng-container [ngSwitch]="ruletagName">
<ng-container *ngSwitchCase="'tagDescription'"> ... </ng-container>
<ng-container *ngSwitchCase="'OriginDestinationReason'"> ... </ng-container>
...
</ng-container>
Here's a full example.
answered Nov 12 '18 at 12:18
sloth
72.9k14127168
add a comment |
0
0
0
One way would be to simply use ruletagName with ngSwitch.
<ng-container [ngSwitch]="ruletagName">
<ng-container *ngSwitchCase="'tagDescription'"> ... </ng-container>
<ng-container *ngSwitchCase="'OriginDestinationReason'"> ... </ng-container>
...
</ng-container>
Here's a full example.
answered Nov 12 '18 at 12:18
sloth
72.9k14127168
One way would be to simply use ruletagName with ngSwitch.
<ng-container [ngSwitch]="ruletagName">
<ng-container *ngSwitchCase="'tagDescription'"> ... </ng-container>
<ng-container *ngSwitchCase="'OriginDestinationReason'"> ... </ng-container>
...
</ng-container>
Here's a full example.
answered Nov 12 '18 at 12:18
sloth
72.9k14127168
answered Nov 12 '18 at 12:18
sloth
72.9k14127168
answered Nov 12 '18 at 12:18
sloth
72.9k14127168
answered Nov 12 '18 at 12:18
sloth
72.9k14127168
72.9k14127168
add a comment |
add a comment |
0
Try using [ngIf] directive provided by Angular
<ng-template #InputListTag [ngIf]="showTemplateInputList">
<mat-form-field fxFlex="30" >
<h1>InputListTag</h1>
</mat-form-field>
</ng-template>
<ng-template #OriginDestinationReason [ngIf]="showTemplateOrigDestReason">
<mat-form-field fxFlex="30" >
<h1>OriginDestinationReason</h1>
</mat-form-field>
</ng-template>
<ng-template #OriginDestination [ngIf]="showTemplateOrigDest">
<mat-form-field fxFlex="30" >
<h1>OriginDestination</h1>
</mat-form-field>
</ng-template>
answered Nov 12 '18 at 11:49
Sarthak Aggarwal
64817
I need template #tagDescription to disappear and only get the template validated, it's possible?
– Eliemerson Fonseca
Nov 12 '18 at 11:56
can you please elaborate? which template you want to validate?
– Sarthak Aggarwal
Nov 12 '18 at 12:00
if user clicks the tags.nameTag [i] and it will be of type #inputList it will exude #InputListTag in place of #tagDescription
– Eliemerson Fonseca
Nov 12 '18 at 12:05
P.S. It's a better idea to usengIfas*ngIfinstead of square bindings.
– Edric
Nov 13 '18 at 10:12
add a comment |
0
Try using [ngIf] directive provided by Angular
<ng-template #InputListTag [ngIf]="showTemplateInputList">
<mat-form-field fxFlex="30" >
<h1>InputListTag</h1>
</mat-form-field>
</ng-template>
<ng-template #OriginDestinationReason [ngIf]="showTemplateOrigDestReason">
<mat-form-field fxFlex="30" >
<h1>OriginDestinationReason</h1>
</mat-form-field>
</ng-template>
<ng-template #OriginDestination [ngIf]="showTemplateOrigDest">
<mat-form-field fxFlex="30" >
<h1>OriginDestination</h1>
</mat-form-field>
</ng-template>
answered Nov 12 '18 at 11:49
Sarthak Aggarwal
64817
I need template #tagDescription to disappear and only get the template validated, it's possible?
– Eliemerson Fonseca
Nov 12 '18 at 11:56
can you please elaborate? which template you want to validate?
– Sarthak Aggarwal
Nov 12 '18 at 12:00
if user clicks the tags.nameTag [i] and it will be of type #inputList it will exude #InputListTag in place of #tagDescription
– Eliemerson Fonseca
Nov 12 '18 at 12:05
P.S. It's a better idea to usengIfas*ngIfinstead of square bindings.
– Edric
Nov 13 '18 at 10:12
add a comment |
0
0
0
Try using [ngIf] directive provided by Angular
<ng-template #InputListTag [ngIf]="showTemplateInputList">
<mat-form-field fxFlex="30" >
<h1>InputListTag</h1>
</mat-form-field>
</ng-template>
<ng-template #OriginDestinationReason [ngIf]="showTemplateOrigDestReason">
<mat-form-field fxFlex="30" >
<h1>OriginDestinationReason</h1>
</mat-form-field>
</ng-template>
<ng-template #OriginDestination [ngIf]="showTemplateOrigDest">
<mat-form-field fxFlex="30" >
<h1>OriginDestination</h1>
</mat-form-field>
</ng-template>
answered Nov 12 '18 at 11:49
Sarthak Aggarwal
64817
Try using [ngIf] directive provided by Angular
<ng-template #InputListTag [ngIf]="showTemplateInputList">
<mat-form-field fxFlex="30" >
<h1>InputListTag</h1>
</mat-form-field>
</ng-template>
<ng-template #OriginDestinationReason [ngIf]="showTemplateOrigDestReason">
<mat-form-field fxFlex="30" >
<h1>OriginDestinationReason</h1>
</mat-form-field>
</ng-template>
<ng-template #OriginDestination [ngIf]="showTemplateOrigDest">
<mat-form-field fxFlex="30" >
<h1>OriginDestination</h1>
</mat-form-field>
</ng-template>
answered Nov 12 '18 at 11:49
Sarthak Aggarwal
64817
answered Nov 12 '18 at 11:49
Sarthak Aggarwal
64817
answered Nov 12 '18 at 11:49
Sarthak Aggarwal
64817
answered Nov 12 '18 at 11:49
Sarthak Aggarwal
64817
64817
I need template #tagDescription to disappear and only get the template validated, it's possible?
– Eliemerson Fonseca
Nov 12 '18 at 11:56
can you please elaborate? which template you want to validate?
– Sarthak Aggarwal
Nov 12 '18 at 12:00
if user clicks the tags.nameTag [i] and it will be of type #inputList it will exude #InputListTag in place of #tagDescription
– Eliemerson Fonseca
Nov 12 '18 at 12:05
P.S. It's a better idea to usengIfas*ngIfinstead of square bindings.
– Edric
Nov 13 '18 at 10:12
add a comment |
I need template #tagDescription to disappear and only get the template validated, it's possible?
– Eliemerson Fonseca
Nov 12 '18 at 11:56
can you please elaborate? which template you want to validate?
– Sarthak Aggarwal
Nov 12 '18 at 12:00
if user clicks the tags.nameTag [i] and it will be of type #inputList it will exude #InputListTag in place of #tagDescription
– Eliemerson Fonseca
Nov 12 '18 at 12:05
P.S. It's a better idea to usengIfas*ngIfinstead of square bindings.
– Edric
Nov 13 '18 at 10:12
I need template #tagDescription to disappear and only get the template validated, it's possible?
– Eliemerson Fonseca
Nov 12 '18 at 11:56
I need template #tagDescription to disappear and only get the template validated, it's possible?
– Eliemerson Fonseca
Nov 12 '18 at 11:56
can you please elaborate? which template you want to validate?
– Sarthak Aggarwal
Nov 12 '18 at 12:00
can you please elaborate? which template you want to validate?
– Sarthak Aggarwal
Nov 12 '18 at 12:00
if user clicks the tags.nameTag [i] and it will be of type #inputList it will exude #InputListTag in place of #tagDescription
– Eliemerson Fonseca
Nov 12 '18 at 12:05
if user clicks the tags.nameTag [i] and it will be of type #inputList it will exude #InputListTag in place of #tagDescription
– Eliemerson Fonseca
Nov 12 '18 at 12:05
P.S. It's a better idea to use
ngIf as *ngIf instead of square bindings.– Edric
Nov 13 '18 at 10:12
P.S. It's a better idea to use
ngIf as *ngIf instead of square bindings.– Edric
Nov 13 '18 at 10:12
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53261407%2fhow-to-work-with-template-choice-in-angular-6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
