Angular2 respond to div size

Question

I am looking for some advice on how to build my first Angular2 app.

I have been playing around and done some little proff of concepts to get my head around how it works, and now want to check that I am taking the right approach as I think there is likely a better way to achieve what I want.

The project:

I am building myself a dashboard that will consist of tiles/widgets that fill the screen. Each will show different information on some topic. Each widget will also have three states/sizes: small, medium & large. Each widget will show a different amount of information based on its size.

Exg. if the widget showed the time, it may work like so:

Small: Display the time in a small font.
Medium: Display the time in a large font.
Large: Display the time in a large format and a few other timezones in a small format.

All widgets will start as medium. Clicking any widget will make it large and every other widget small. Clicking a large widget will make all widgets medium again.

My approach:

I have build an app.component that contains 1 div per widget, along with a few sample widgets that get loaded in. I would like to separate everything and be as modular as possible, so I plan that app.component will deal with positioning, moving and sizing the divs based on the screen size and number of widgets. As a result, I intend on using a pretty front end that takes care of where to position the divs. It will then also tell each widget if they should be small, medium or large.

The widget will then be responsible for displaying the correct amount of information.

Here is where I run into trouble - The app.component sets the widths as a percentage - currently 20%, 50% and 80%. I want the contents of the widget to display based on the width of its div, including as the window size changes, but I cannot pass the width in as the app.component doesn't know it (it only sets the width as a %).

What I have come up with works, but I'm sure there is a better way...

app.template.html:

<div class="widget-container" (click)="onClick1($event);" [style.width]="widget1Width + '%'"><widget-1></widget-1></div>
<div class="widget-container" (click)="onClick2($event);" [style.width]="widget2Width + '%'"><widget-2></widget-2></div>
<div class="widget-container" (click)="onClick3($event);" [style.width]="widget3Width + '%'"><widget-3></widget-3></div>

app.component.ts:

public widget1Width=50;
public widget2Width=50;
public widget3Width=50;
@ViewChild(Widget1Component) widget1: Widget1Component;
@ViewChild(Widget2Component) widget2: Widget2Component;
@ViewChild(Widget3Component) widget3: Widget3Component;

onClick1(value:any) {                                                                                                                                                                              
    this.widget1Width=80;
    this.widget2Width=20;
    this.widget3Width=20;
    this.widget1.parentResize(this.widget1Width);
    this.widget2.parentResize(this.widget2Width);
    this.widget3.parentResize(this.widget3Width);
}

widget1.component.ts:

export class WidgetWeatherComponent {                                                                                                                                
    panelLarge = 0;
    public widgetWidth:any;
    parentResize(value:any) {
        console.log(value);                                                                                                                                                                          
        this.widgetWidth=value;                                                                                                                                                                      
    }                                                                                                                                                                                                    
}

widget1.template.html:

<div #widget1ParentDiv>
    <div *ngIf="widget1ParentDiv.clientWidth>=700"> ... </div>
    <div *ngIf="widget1ParentDiv.clientWidth>=300 && widget1ParentDiv.clientWidth<700"> ... </div>
    <div *ngIf="widget1ParentDiv.clientWidth<300"> ... </div>
</div>

I understand that I can also change the class and use CSS if I am changing format of text ect.

While I am very happy to take advice on the arranging, sizing, front end stuff, my main focus atm is to work out the right approach for the widgets so that I can go ahead and build a number of them. The code to resize things in app.component.ts is just to get things moving.

The problem

The main concern I have is that accessing widget1ParentDiv.clientWidth seams really bad! Normally I would handle the screen size change in the css using @media, but as each widget has 3 'states/sizes' (small, medium, large) that would cause too much effort. I really want to do exactly like @media, but for the parent div. I have read about that a little, but my understanding is that it doesn't really exist out of the box.

My other frustration with this approach is that I have to keep repeating *ngIf="widget1ParentDiv.clientWidth>400" where I would rather define that somewhere else and use *ngIf="large", but I cannot see how to do this without needing to respond to the screen size changing and update a variable.

Please let me know if this doesn't make sense or more information is needed. Any advice/thoughts would be appreciated.

Angular2 respond to div size

0 Answers0

Linked