How to Apply a default attribute to an angular component

Question

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?

Hugo Cortez · Accepted Answer · 2024-10-10 18:03:51Z

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.

This seems likely to be the correct answer, but for some reason the directive is not taking effect when used. I even tried applying a very simplistic background color change to the element, but still no effect. No errors either. I will have to try to get the working later, I'm sure I'm missing something very obvious. — devjoco, CommentedOct 10, 2024 at 20:25
I don't know how you created the directive (recommendation: ng generate directive path/to/directive), but you should add it to your module's declarations. You must also enter the name of the selector as a property of the element you want to use. app.module.ts: @NgModule({ declarations: [ MyRowDirective, MyRowComponent ... ] ... }) *.component.ts: ... <my-row myRowDirective> <some-component-1></some-component-1> <some-component-2></some-component-2> </my-row> ... — Hugo Cortez, CommentedOct 11, 2024 at 12:14

Collectives™ on Stack Overflow

How to Apply a default attribute to an angular component

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related