How to make the creation of a card dynamic? - html

Question

My Problem is that every template created will be Added to the same Card like the image below shows it
And if i set the height rather than auto it will cut the card until the giving measurement.
is there anyone who can help me to make each template have it own card ?
Card.Html
<div class="content" >
<div fxLayout="row wrap" fxLayoutGap="16px grid">
<div [fxFlex]="(100/gridColumns) + '%'" fxFlex.xs="100%" fxFlex.sm="33%" >
<mat-card class="mat-elevation-z4 info" >
<mat-card-content *ngFor="let item of templates" [innerHTML]="item.templatebody | safeTemplate"></mat-card-content> <!-- named one way flow syntax property binding-->
</mat-card>
</div>
</div>
</div>
Card.ts
import { Component, OnInit, ViewChild,Pipe, PipeTransform } from '#angular/core';
import { DomSanitizer } from "#angular/platform-browser";
import { EmailEditorComponent } from 'angular-email-editor';
import { SenderService } from "../sender.service";
import { TemplateCard } from "src/app/layouts/default/templates/template";
//this pipe is designed to make the HtmlRender Safe using SanitizerDOM
#Pipe({ name: "safeTemplate" })
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {}
transform(value: any) {
return this.sanitizer.bypassSecurityTrustHtml(value);
}
}
#Component({
selector: 'app-cards',
templateUrl: './cards.component.html',
styleUrls: ['./cards.component.scss']
})
export class CardsComponent implements OnInit {
public templates:TemplateCard[];
public model: any;
options = {
};
gridColumns = 3;
toggleGridColumns() {
this.gridColumns = this.gridColumns === 3 ? 4 : 3;
}
dangerousUrl='<input type="checkbox">';
constructor(public http:SenderService) { }
ngOnInit(): void {
this.model=this.http.getEmail("http://localhost:3000/savetemplate").subscribe( data => {
this.templates=data;
console.log(this.templates);
},
err => console.error(err),
() => console.log('template completed')
);}
}