CODEWITHSUNDEEP
javascripthtmlangularangularjs-directiveangular-components
devjoco
devjoco

Reputation: 484

How to Apply a default attribute to an angular component

I'm trying to format some fields into neat rows and columns, and because I have to match some other components with very specific formatting, the html that works looks like this:

<div fxLayout="column" style="margin-right: -30px">
  <div fxLayout="row" fxLayoutGap="10px" style="margin-bottom: 3px">
    <div fxFlex="92" fxLayout="row column" fxLayoutAlign="space-between start">
      <some-component-1
        fxFlex="45"
        fxFlex.sm="90"
        fxFlex.xs ="90"
      ></some-component-1>
      <some-component-2
        fxFlex="45"
        fxFlex.sm="90"
        fxFlex.xs ="90"
      ></some-component-2>
    </div>
  </div>
</div>

This is a lot to either type out or copy and paste, so I want to abstract some of these fxLayout divs away into an angular component so that it looks something like this:

<my-row>
  <my-column>
    <some-component-1></some-component-1>
  </my-column>
  <my-column>
    <some-component-2></some-component-2>
  </my-column>
</my-row>

I was able to create the my-row component like this:

row.component.html:

<div fxLayout="column" style="margin-right: -30px">
  <div fxLayout="row" fxLayoutGap="10px" style="margin-bottom: 3px">
    <div fxFlex="92" fxLayout="row column" fxLayoutAlign="space-between start">
      <ng-content></ng-content>
    </div>
  </div>
</div>

Which allows me to do this:

<my-row>
  <some-component-1
    fxFlex="45"
    fxFlex.sm="90"
    fxFlex.xs ="90"
  ></some-component-1>
  <some-component-2
    fxFlex="45"
    fxFlex.sm="90"
    fxFlex.xs ="90"
  ></some-component-2>
</my-row>

Still, I would like to not have to include these fxFlex attributes for each of the nested components. When I try to create the my-column component, I'm unable to apply the fxFlex fields to this component by default.

I've tried the following to no avail:

column.component.html:

<ng-container
  fxFlex="45"
  fxFlex.sm="90"
  fxFlex.xs ="90"
>
  <ng-content></ng-content>
</ng-container>

and

<ng-container>
  <ng-content 
    fxFlex="45"
    fxFlex.sm="90"
    fxFlex.xs ="90"
  ></ng-content>
</ng-container>

Is there a way to automatically apply these fxFlex attributes to the my-column component?

Upvotes: 0

Views: 58

Answers (1)

Hugo Cortez
Hugo Cortez

Reputation: 11

You can try using angular directives and add a directive to your new component my-row where it will see this new component and get all its children and assign the properties you want:

import {Directive, ElementRef} from '@angular/core';
@Directive({
  standalone: true,
  selector: '[myRowDirective]',
})
export class MyRowtDirective {
  constructor(private el: ElementRef) {
    const row = this.el.nativeElement;
    const components = select all children of row
    for component in components{
      component.setAttribute("fxFlex", "45")
      ...
    }
  }
}

I made a simplified code, research a little about directives, but this is a base that can help.

Upvotes: 1

Related Questions