Dynami c Применение свойств Flex-Layout в angular 8 - PullRequest
Новая
       36

Dynami c Применение свойств Flex-Layout в angular 8

0 голосов
/ 15 апреля 2020

Я пытаюсь добавить динамические c flex-свойства, используя атрибут-директиву в angular 8.

Моя директива - 

   import { Directive, Input, HostBinding } from '@angular/core';

@Directive({
selector: '[medlayout] , [medflex] , [medflexlayoutalign] , [medflexgap]'
})
 export class MedLayoutDirective {
 @Input('medlayout') medlayout: string;
 @HostBinding('style.display') display = 'flex';

 @Input() shrink: number = 1;
 @Input() grow: number = 1;
 @Input('medflex') medflex: string;

 @Input('medflexgap') medflexgap : string;
 flexGap: string;
 @HostBinding('style.justify-content')
 get flexgap() {
 if(this.medflexgap === 'flex-start'){
   return `flex-start`
 }
if(this.medflexgap === 'space-between'){
  return `space-between`
}
 if(this.medflexgap === 'space-around'){
  return `space-around`
}

}

@Input('medflexlayoutalign') medflexlayoutalign: string;
@HostBinding('style.align-items')
get flexalign() {
 if (this.medflexlayoutalign === 'flex-end') {
   return `flex-end`
 }
 if (this.medflexlayoutalign === 'flex-start') {
  return `flex-start`
 }
 if (this.medflexlayoutalign === 'end') {
  return `end`
}
if (this.medflexlayoutalign === 'center') {
  return `center`
}
if (this.medflexlayoutalign === 'stretch') {
  return `stretch`
}
if (this.medflexlayoutalign === 'self-start') {
  return `self-start`
}
if (this.medflexlayoutalign === 'self-end') {
  return `self-end`
}

// return (this.medflexlayoutalign === 'space-around') ? 'space-around' : 'space-between';
}

 @HostBinding('style.flex')
 get style() {
   return `${this.grow} ${this.shrink} ${this.medflex === '' ? '0' : this.medflex}%`;
  }

  @HostBinding('style.flex-direction')
  get direction() {
  return (this.medlayout === 'column') ? 'column' : 'row';
 }
    }

.ts file - 

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


  @Component({
 selector: 'med-layout-config',
 templateUrl: './med-layout-config.component.html',
 styleUrls: ['./med-layout-config.component.scss']
 })
export class MedLayoutConfigComponent implements OnInit {


 layout = "row";
flex = '100';
 flexalign = "flex-end";
 flexgap = "space-around"
 constructor() { }

  ngOnInit() {
  }

  onChangeConfig() {
   this.layout = 'column';
   this.flex = '80';
   this.flexalign = 'flex-start';
   this.flexgap = "space-between"

 }
   }

. html --- 

<mat-card>
   <div [medlayout]="layout" [medflex]="flex" [medflexlayoutalign]="flexalign" 
   [medflexgap]="flexgap">
    <mat-form-field>
        <input matInput placeholder="category">
    </mat-form-field>
    <mat-form-field>
        <input matInput placeholder="Sub-categorry">
    </mat-form-field>
    <mat-form-field>
        <input matInput placeholder="Delegates">
    </mat-form-field>
    <button type="submit" mat-raised-button color="primary" (click)="onChangeConfig()">
        change Layout
    </button>
</div>

Моя идея - добавить свойства, используя директиву в моем шаблоне. Я столкнулся с проблемой, что я не могу написать одну директиву, вместо этого я должен использовать selector: '[medlayout] , [medflex] , [medflexlayoutalign] , [medflexgap]'. Моя цель состоит в том, чтобы я дал все свойства flex как объект json, а значения были привязаны к шаблону с помощью директивы и применены к элементам.

...