Apply CSS style to angular componet from within the component

Question

If I create a very simple component in angular with the following html:

<div [ngStyle]="{ 'grid-column-start':  colStart }" >
  testing
</div>

The component typescript file contains 1 input

  @Input() colStart: number;

I want to use the component within a css grid however when the component in rendered in the dom it's wrapped in a element for the component

<app-test-component _ngcontent-fsq-c305="" _nghost-fsq-c298="" ng-reflect-col-start="3">
    <div _ngcontent-fsq-c298="" ng-reflect-ng-style="[object Object]" style="grid-column-start: 3;">
        testing
    </div>
</app-test-component>

So in the example above I'm trying to position the component within a grid but it doesn't work as the css property in on the div and not the component.

How can I resolve this?

I've created this StackBlitz to demo the issue:

Example

Thanks

Eliseo · Accepted Answer · 2022-05-12 16:51:14Z

1

your grid-item-component can be like

<div class="grid-item">
  <ng-content></ng-content>
</div>


export class GridItemComponent implements OnInit {
  @Input() set colStart(value:number)
  {
    this.el.nativeElement.style['grid-column-start']=value
  }

  constructor(private el:ElementRef) {}

  ngOnInit() {
  }
}

answered May 12, 2022 at 16:51

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

danywalls · Accepted Answer · 2022-05-12 14:46:47Z

0

Component styles have a few special selectors in Angular, like :host and :host-context or the power of [ngClass].

.col-3 {
    grid-column-start: 3
}

<app-test-component [ngClass]="col-3">
        
</app-test-component>

I highly recommend reading https://angular.io/guide/component-styles

answered May 12, 2022 at 14:46

danywalls

7091 gold badge10 silver badges27 bronze badges

1 Comment

Sun Over a year ago

OK but I want to set the number of columns via an input value so the style needs to be set within the component. I've updated the example

Collectives™ on Stack Overflow

Apply CSS style to angular componet from within the component

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related