How to push items to popup in Angular?

Issue

I have the following data array:

public tools: Tool[] = [
    { image: './assets/img/OpenFolder.svg', title: 'Upload' },
    { image: './assets/img/Save.png', title: 'Save' },
    { image: './assets/img/Printer.png', title: 'Printing' },
    { image: './assets/img/Delete.png', title: 'Delete' },
    { image: './assets/img/Paste.svg', title: 'Paste' },
    { image: './assets/img/Copy.png', title: 'Copy' },
    { image: './assets/img/favicon.png', title: 'Rotate left' },
    { image: './assets/img/favicon.png', title: 'Rotate right' },
    { image: './assets/img/favicon.png', title: 'Flip vertical' },
    { image: './assets/img/favicon.png', title: 'Flip horizontal' },
    { image: './assets/img/favicon.png', title: 'Crop picture' },
    { image: './assets/img/favicon.png', title: 'Resize picture' },
    { image: './assets/img/favicon.png', title: 'Brightness' },
    { image: './assets/img/favicon.png', title: 'Color' },
    { image: './assets/img/favicon.png', title: 'Opacity' },
];

The HTML code:

<ul>
    <li *ngFor="let tool of tools" title="{{ tool.title }}"><img src="{{ tool.image }}"></li>
</ul>

And SCSS code:

ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

Items display horizontally and inline when the screen is shrunk smaller than max-width

I'm hoping that when the screen shrinks to less than max-width, the newline items will be pushed into a pop-up window (only when the button is clicked will the window pop up)

Looking forward to hearing from everyone!

Solution

You could use BreakpointObserver @angular/cdk/layout to observe the viewport-width in your component.

import {BreakpointObserver, BreakpointState} from '@angular/cdk/layout';

may look something like this:

this.breakpointObserver
  .observe(['(max-width: 1024px)'])
  .subscribe((state: BreakpointState) => {
    // TODO: your logic
  });

Otherwise you just render your list twice in your markup and use mediaqueries in your css to switch visibility.

Answered By - Philipp Sengelmann