Angular 2+: Dynamically set CSS width, of element based on available real estate

Question

I consider how effectively set in Angular 2+ width of element. I would like firstly to check available real estate in parent element and than appropriately set width of child elements to fit equally this available space in its parent.

how could I listen on width change events of parent element?
how to check this width?
then I could make some calculation of elements width to fit requirements of component user
then change width of element to calculated value.

I have tried to use CSS3 and Media Queries but it makes my Component to tightly coupled to certain sizing precondition and makes my angular component not general-purpose.

It is almost never a good idea to start trying to do your own layout calculations. And it is almost never necessary with the appropriate CSS, which can include percents, calc, and flexbox. — user663031
– user663031, Commented May 8, 2017 at 2:27
Yeah but without my own calculation the angular component is not so easily reusable. Then its not just case of use it set max-cols number for my gird of cards and min-length required for this cards and it works, then each time for each use case you must manually do you own custom CSS to fit actual needs of the page. Then component isn't of general purpose, easy to use but its, just the first draft to start the designing of entirely new component based on current by modifying CSS files, etc. — Michał Ziobro
– Michał Ziobro, Commented May 8, 2017 at 8:45

Federico Pettinella · Accepted Answer · 2017-05-08 00:02:44Z

4

You could use ngStyle on the child elements. The documentation's example:

<some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>

You'd be responsible for retreiving/calculating the widthExp variable up-to-date from the parent component.

answered May 8, 2017 at 0:02

Federico Pettinella

1,5211 gold badge11 silver badges20 bronze badges

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

1 Comment

Michał Ziobro Over a year ago

Ok I think I have achieved this

Michał Ziobro · Accepted Answer · 2017-05-08 08:54:25Z

My solution finally was :

add (windows:resize) event binding:

and element reference #gridElement in HTML template

<div class="grid" (window:resize)="onResize($event)" #gridElement>

Then inside component class I need to Inject this guys:

protected _changeDetectorRef:ChangeDetectorRef; 

@ViewChild('gridElement') gridElement: ElementRef;

Make sume helper variables

public gridCardWidth = 0;
public gridCols = 0;

Write function adjusting size of each grid-card element

adjustCardWidthToAvailableEstate() { 
        var gridWidth : number = this.gridElement.nativeElement.offsetWidth;
        var newGridCardWidth = this.calculateCardWidth(gridWidth);
        this.gridCardWidth = ((newGridCardWidth - this.GRID_CARD_MARGIN_LEFT)/gridWidth)*100; // [%]
        this.gridCols = Math.floor(gridWidth/this.gridCardWidth);

        // refresh list of cards based on content objects
        this.contentObjectsObservable = Observable.of(this.contentObjects);
    }

Important here is this line of getting grid container width:

var gridWidth : number = this.gridElement.nativeElement.offsetWidth;

The rest is just the logic of calculation.

Then call this grid-card size adjusting function in this methods:
```
ngOnInit(); ngAfterViewChecked(); onResize(); 
```
In ngAfterViewChecked() I need to inform that adjusting of size has happened changeDetector object like this
```
this._changeDetectorRef.detectChanges();
```
Lastly I have a width style binding on grid-card element in HTML template
```
<grid-card ... [style.width.%]="gridCardWidth"></grid-card>
```

Krishna Thurimerla · Accepted Answer · 2021-02-25 04:57:04Z

0

Just use the below code in the component where you want.

this code is an example to set a div width from the component.

var x: any = document.getElementById('myDivID');
 x.style.width = '250px';

answered Feb 25, 2021 at 4:57

Krishna Thurimerla

11 bronze badge

Collectives™ on Stack Overflow

Angular 2+: Dynamically set CSS width, of element based on available real estate

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related