Responsive sizes screens in Angular

Tram Ho

Most of the time we use CSS media queries to handle the corresponding screen size changes to different content layouts. However, sometimes the CSS media queries are not enough for that. We need to process it to meet it in our code.

In this article, I want to share on how to find responsive breakpoints in Angular, with a twist – we don’t maintain responsive breakpoint sizes in your Typescript code (because responsive breakpoints are already defined in CSS).

We will use Angular with Bootstrap in this example, but it works for any CSS frameworks and classes. Let’s get started:

What is the plan?

We will use CSS Classes to identify current responsive breakpoints. There are 5 breakpoints in CSS Bootstrap. The CSS classes to determine the visibility of each breakpoints are:

  • Visible only on xs: .d-block .d-sm-none
  • Visible only on sm: .d-none .d-sm-block .d-md-none
  • Visible only on md:. d-none .d-md-block .d-lg-none
  • Visible only on lg: .d-none .d-lg-block .d-xl-none
  • Visible only on xl: .d-none .d-xl-block

The CSS display property will be converted between none or the block . We will apply these classes to HTML elements.

Every time we change the screen size, we’ll loop and find the HTML element with style display: block, this is how we will detect the current breakpoint.

Here is a demo for your reference: https://stackblitz.com/edit/angular-size .

Implementation: Component

Let’s create an Angular size-detector component.

Component HTML template:

component Typescript code:

After looking at the component code, you might be wondering what SCREEN_SIZE values ​​are. * Where. It is an enum. Create screen enum (You can create a new file or just put enum in the same component file).

Also, remember to add Bootstrap to your project! You can add it via npm or yarn, but in this example, we will use the easier way. Add linkt cdn in index.html.

  1. First, we determine the list of sizes we support and the CSS classes used to identify each breakpoints.
  2. In HTML, we loop through the list size, create a div element, assign a css, and display it. Also note that we give each div an extra unique css class ** – <SIZE_ENUM> **.
  3. We have a function. We need to run the logic all the time when the screen size changes. We use HostListener to listen for the event window resize . This is where we will write the logic to find the screen size change. We will finish it later.
  4. We need to run the logic every time when the screen size changes. We use HostListener to listen for the event window resize
  5. We also need to run the logic when we first initialize the app. We need to run it in the AfterViewInit component lifecycle hook.

Implementation: Service & Component

Now we’re ready to code component is “almost”, begin to deploy our service resize.

The code resize service is very simple:

  1. We create a rxjs resizeSubject thread.
  2. We have a public method onResize that takes size as a parameter. It then pushes the value into the resize flow. (We will call this method later in our size-detector component).
  3. Note that we use the differUntilChanged operator in the observable resize. We use it to reduce unnecessary notifications. For example, when your screen size changes from 200px to 300px, it is still considered to be the size xs in bootstrap. We do not need to notify in that case. (You can delete the operator if you need to).
  4. We output a resize stream that can be viewed via *** onResize $ ***. Any components, services, directives, etc. can then subscribe to this stream to receive notifications whenever it changes size.

Next, let’s go back to our size-detector component and update the DetScreenSize logic.

  1. First, we will need to inject the newly created ElementRef and ResizeService into our component.
  2. Based on our CSS classes, at any given time, only ONE HTML element will display. We loop through our sizes array and find it.
  3. For each size of our array sizes we will use the HTML5 element selector to find the element according to the only css class we have previously defined – <SIZE_ENUM>.
  4. Once we find the current display element, we will notify our service resize by calling the onResize method.

Using Service and Component

You can put the size-detector component under our app-component component . For example:

In this example, I have another hello-component in the app-component , but that doesn’t matter.

Because I put components in app-component , it means that I can use ResizeService everywhere (directives, components, services, etc.).

For example, suppose I want to detect screen size changes in hello-component , I can do so by putting ResizeService into the constructor, then subscribe onSizeChange $ can observe and do what I need.

In the above code, we detect the screen size changes and only display the current screen size value.

Let’s watch it :

One of the possible use scenarios is that you have an accordion on the screen. In mobile phones, you want to collapse all the accordion panels, showing only the active one panel at a time. However, in desktop computers, you may want to expand all panels.

Summary

This is how we can detect screen size changes without maintaining the actual breakpoint size in our JavaScript code. This is the code: https://stackblitz.com/edit/angular-size

If you think about it, not often do users change screen sizes when browsing apps. You can handle wide screen changes of applications (like our example above) or handle it only when you need it (in case of using / basis component).

Also, if you don’t want to duplicate and maintain breakpoint sizes in your JavaScript code, you can delete this component, move the detectScreenSize function into your service, and make some logical changes. It is not difficult to do that. (Can you try?)

That is all. Happy coding!

Share the news now

Source : Viblo