Dynami c Flexlayout Вставка атрибута в HTML Tag?

Question

Я пытаюсь создать компоненты, содержащие HTML шаблоны для мат-карт, чтобы большинство HTML можно было хранить в нескольких «шаблонных» компонентах, которые будут использоваться на веб-сайте. Таким образом, код HTML не нужно повторять снова и снова, сводя к минимуму потенциальные ошибки, и сохраняя сайт единообразным, так как над ним работают несколько человек.

Я использовал @Input () в компоненте шаблона, чтобы разрешить вставку различных значений при реализации шаблона. Я могу вставить значения для директив flexlayout, например, в шаблон .ts есть

  @Input() labelGap : string = "50%";

и в. html у нас есть

<mat-card>
 <mat-card-content>
  <div>fxFlex="{{labelGap}}"</div>
 </mat-card>
</mat-card-content>

Можно также сделать то же самое, используя [ngStyle] для вставки CSS -подобного стиля.

Моя проблема заключается в том, чтобы сделать это для

 <div>fxLayout.lt-md="column"</div>

Я хочу иметь возможность изменять «.lt-md», а не значение столбца при реализации шаблона, чтобы его можно было изменять в зависимости от того, что требуется. Когда я пытаюсь использовать @Input для этого, моя IDE жалуется, что я не могу вставить атрибут в тег HTML.

Есть ли способ сделать это?

Template HTML

<div class="container" fxLayoutGap="{{cardGap}}" fxLayout="row" fxLayout.lt-md:"column" fxLayoutAlign="stretch stretch" >
 <mat-card fxLayout="column" fxFlex="grow" class="child-1" >

   <mat-card-content fxFlex="grow">
     <ng-container [ngTemplateOutlet]="topTemplate"></ng-container>


     <ng-content></ng-content>
     <ng-container *ngFor="let lv of labelValues">
       <div fxLayout="row">
         <div [ngStyle]="{paddingRight: labelPadding, wordWrap: 'break-all' }" fxFlex="{{labelGap}}"><b>{{lv.label}}</b></div>
         <div [ngStyle]="{wordWrap: 'break-all' }">{{lv.value}}</div>
       </div>
     </ng-container>

   </mat-card-content>
   <ng-container [ngTemplateOutlet]="bottomTemplate"></ng-container>
 </mat-card>
</div>

Типизированный шаблон

import {Component, Input, OnInit, TemplateRef} from '@angular/core';



export interface OCLabelValue {
  label : string,
  value : any
}

@Component({
  selector: 'app-oc-card',
  templateUrl: './oc-card.component.html',
  styleUrls: ['./oc-card.component.scss']
})

export class OcCardComponent implements OnInit {
  @Input() topTemplate: TemplateRef<any>;
  @Input() bottomTemplate: TemplateRef<any>;
  @Input() styleClass: string ="child-1";
  @Input() labelGap : string = "50%";
  @Input() labelPadding : string = "10px";
  @Input() cardGap : string = "5px";

  @Input()
  labelValues : OCLabelValue[] = null;

  constructor() { }

  ngOnInit() {
  }



}

Затем есть компонент (ы), который реализует таблицу следующим образом:

HTML

<app-oc-card fxFlex=""

               [labelValues]="mockData1"
               [labelGap]="'30%'"
               [labelPadding]="'10px'"
               [topTemplate]="my_template" [bottomTemplate]="footer">
    <ng-container *ngTemplateOutlet=my_template></ng-container>
  </app-oc-card>

<ng-template #my_template><span style="color:red">Header goes here</span></ng-template>

<ng-template #footer>
  <mat-card-footer style="margin: 1px" fxLayoutAlign="end">I am a Footer</mat-card-footer>
</ng-template>

TS

import { Component, OnInit } from '@angular/core';
import {OCLabelValue} from "../../general/oc-card/oc-card.component";


@Component({
  selector: 'app-debug-card',
  templateUrl: './debug-card.component.html',
  styleUrls: ['./debug-card.component.scss']
})
export class DebugCardComponent implements OnInit {


  constructor() { }

  ngOnInit() {
  }


  get mockData1() : OCLabelValue[] {
    return [
      { label : 'Surname', value : 'Becker'},
      { label : 'FirstName', value : 'John'},
      { label : 'CustomerNo', value : 122321},
      { label : 'Address for the books', value : '6 Tinnapark Drive Kjg'}
    ];
  }
}