load html or template into a div after clicking it

Question

i'm new to Angular and i have a question: i have a div ... and if we click on the div..a function will be fired..this function will load a template into the div after validating the input data by comparing it with default data. so i mean

<div (click)="openTile(data.Salutation === Title.Sir) ? 'Tasks-details' : 'Todo-details';" >

where Salutation is a argument of 'data' (a distance of a constructor) and Title is an enum Class(which imported in our component here)

anyone can help me by function openTile?

thx alot

Answer 1

I'm not sure I understand you correctly. If just want to show different content depending on some condition after click, you can do:

    @Component({
        template: `
    <div (click)="onClick(data.Salutation, Title.Sir)>
        <ng-container [ngTemplateOutlet]="isEqual ? task : todo"></ng-container>
    </div>
    <ng-template #task> if true </ng-template>
    <ng-template #todo> if false </ng-template>
`
    })
    class MyComponent {
        isEqual: boolean;
        onClick(salutation, sir) {
            this.isEqual = salutation === sir;
        }
    }