A guide on including a class to a DOM element in Angular 6 without relying on Jquery

Question

A guide on including a class to a DOM element in Angular 6 without relying on Jquery

Currently, I have created a component template using Bootstrap that looks like this:

<div class="container">

  <div class="row my-4">
    <div class="col-md-12 d-flex justify-content-center">
      <h2> EVALUACIÓN DE {{ curso }} </h2>
    </div>
  </div>

  <div class="row">
    <div class="col-md-9">
      <h4>Pregunta 1 de 20 </h4>
      <p>¿Cúal de las siguientes alternativas es correcta? </p>
    </div>
    <div class="col-md-3 d-flex align-items-center" id="icono-reloj">
      <img class="mx-2" src="/assets/img/alarm-fill.svg" alt="" width="24" height="24" title="timer"> <span class="mx-3">0:20</span>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="list-group" ngFor="let alternativa of alternativas">
        <p class="list-group-item list-group-item-action" (click)="avanzar()">este es un ejemplo de una alternativa ...</p>
      </div>
    </div>
  </div> 
</div>

I am looking to implement a feature where the question lines will be centered when the browser screen is resized to less than 767.98px.

https://i.stack.imgur.com/1VRND.png

After researching, it seems that achieving this with jQuery is no longer recommended. It is suggested to use the "Renderer2" class instead. So, my question is:

Does the documentation on Renderer2 provide a way to detect the screen size and apply specific Bootstrap classes based on that, such as centering the divs in question when the screen width is less than 767.98px?

javascript jquery angular typescript angularjs-directive

Answer 1

Answer №1

In search of a specific angular solution:

import {
  Component,
  OnInit,
  HostListener,
  ViewChild,
  ElementRef,
} from "@angular/core";

@Component({
  selector: "app-header",
  templateUrl: "./header.component.html",
  styleUrls: ["./header.component.scss"],
})
export class HeaderComponent implements OnInit {
  currentWindowWidth: number;
  isMobile: boolean;

  @ViewChild("control") control: ElementRef;

  constructor() {}

  ngOnInit() {}

  @HostListener("window:resize", ["$event"])
  public onResize(window) {
    this.isMobile = window.currentTarget.innerWidth < 993 ? true : false;
    this.toggleMobileClasses(this.control.nativeElement, this.isMobile)
  }

  @HostListener("window:load", ["$event"])
  public onLoad(window) {
    this.isMobile = window.currentTarget.innerWidth < 993 ? true : false;
  }

  toggleMobileClasses(targetElement: HTMLElement, isMobile) {
    isMobile ? targetElement.classList.add('text-center') : targetElement.classList.toggle('text-center');
  }

}

The significance lies in the HostListener

Decorator that specifies a DOM event to watch for and assigns a method to execute when that event occurs. Angular HostListener Docs

<div #control class="container">

  <div class="row my-4">
    <div class="col-md-12 d-flex justify-content-center">
      <h2> EVALUACIÓN DE {{ curso }} </h2>
    </div>
  </div>

  <div class="row">
    <div class="col-md-9">
      <h4>Pregunta 1 de 20 </h4>
      <p>¿Cúal de las siguientes alternativas es correcta? </p>
    </div>
    <div class="col-md-3 d-flex align-items-center" id="icono-reloj">
      <img class="mx-2" src="/assets/img/alarm-fill.svg" alt="" width="24" height="24" title="timer"> <span class="mx-3">0:20</span>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="list-group" ngFor="let alternativa of alternativas">
        <p class="list-group-item list-group-item-action" (click)="avanzar()">este es un ejemplo de una alternativa ...</p>
      </div>
    </div>
  </div> 
</div>

If utilizing Angular Universal for Server Side Rendering, this method will not trigger any errors regarding window is not defined while rendering and filling dynamic HTML content.

Answer 2

In search of a specific angular solution:

import {
  Component,
  OnInit,
  HostListener,
  ViewChild,
  ElementRef,
} from "@angular/core";

@Component({
  selector: "app-header",
  templateUrl: "./header.component.html",
  styleUrls: ["./header.component.scss"],
})
export class HeaderComponent implements OnInit {
  currentWindowWidth: number;
  isMobile: boolean;

  @ViewChild("control") control: ElementRef;

  constructor() {}

  ngOnInit() {}

  @HostListener("window:resize", ["$event"])
  public onResize(window) {
    this.isMobile = window.currentTarget.innerWidth < 993 ? true : false;
    this.toggleMobileClasses(this.control.nativeElement, this.isMobile)
  }

  @HostListener("window:load", ["$event"])
  public onLoad(window) {
    this.isMobile = window.currentTarget.innerWidth < 993 ? true : false;
  }

  toggleMobileClasses(targetElement: HTMLElement, isMobile) {
    isMobile ? targetElement.classList.add('text-center') : targetElement.classList.toggle('text-center');
  }

}

The significance lies in the HostListener

Decorator that specifies a DOM event to watch for and assigns a method to execute when that event occurs. Angular HostListener Docs

<div #control class="container">

  <div class="row my-4">
    <div class="col-md-12 d-flex justify-content-center">
      <h2> EVALUACIÓN DE {{ curso }} </h2>
    </div>
  </div>

  <div class="row">
    <div class="col-md-9">
      <h4>Pregunta 1 de 20 </h4>
      <p>¿Cúal de las siguientes alternativas es correcta? </p>
    </div>
    <div class="col-md-3 d-flex align-items-center" id="icono-reloj">
      <img class="mx-2" src="/assets/img/alarm-fill.svg" alt="" width="24" height="24" title="timer"> <span class="mx-3">0:20</span>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="list-group" ngFor="let alternativa of alternativas">
        <p class="list-group-item list-group-item-action" (click)="avanzar()">este es un ejemplo de una alternativa ...</p>
      </div>
    </div>
  </div> 
</div>

If utilizing Angular Universal for Server Side Rendering, this method will not trigger any errors regarding window is not defined while rendering and filling dynamic HTML content.

Answer 3

Answer №2

function resizeWindow() {

    function reportWindowSize() {
    
     let height = window.innerHeight;
     let width = window.innerWidth;

      console.log("Current Width: "+ width);
      
         if( width < 600 ) {
         document.getElementById("yourElementId").classList.add("center");
         } else {
                  document.getElementById("yourElementId").classList.remove("center");
         }
    }
      
    window.onresize = reportWindowSize;
}


resizeWindow();

#yourElementId {
border: 1px solid #5599cc;
}
.center{ 
  text-align: center;
}

<div id="yourElementId">Some text</div>

You have the option to utilize VanillaJS

Answer 4

function resizeWindow() {

    function reportWindowSize() {
    
     let height = window.innerHeight;
     let width = window.innerWidth;

      console.log("Current Width: "+ width);
      
         if( width < 600 ) {
         document.getElementById("yourElementId").classList.add("center");
         } else {
                  document.getElementById("yourElementId").classList.remove("center");
         }
    }
      
    window.onresize = reportWindowSize;
}


resizeWindow();

#yourElementId {
border: 1px solid #5599cc;
}
.center{ 
  text-align: center;
}

<div id="yourElementId">Some text</div>

You have the option to utilize VanillaJS

A guide on including a class to a DOM element in Angular 6 without relying on Jquery

Answer №1

Answer №2

Similar questions

Incorporating full-screen viewing in the browser, these websites provide a seamless user experience with a "learn more" button strategically placed at the bottom. This button effortlessly

Suggestions for enhancing the functionality of this code by incorporating an additional dynamic chained selection box

Tips for maintaining i18n locale slugs and ensuring i18n consistency when reloading in Next.js

retrieve a subdocument from an array in MongoDB

Can integers be used as keys in a JavaScript object's storage?

Having trouble locating the module for my custom TypeScript module

Can data be transferred between browsers, such as from Google Chrome to Mozilla Firefox?

How should filtering be properly done on a data array within a Redux reducer function?

Guide to utilizing JavaScript for a basic gaming experience

Tips for efficiently handling state across various forms in separate components using only one save button within a React-Redux application

Sharing data between the main component and the sidebar in React-Router

Tips for adjusting the header color in materialize framework?

I am looking to obtain assistance through denomongo for guidance

Simple way to retrieve the first and last date of the current month using Node.js

Is there a way to retrieve the password of the currently logged in user using Keycloak in JavaScript?

Removing numerous items with checkboxes

Retaining the Chosen Tab upon Page Reload in Bootstrap 5.1

Tips for loading JSP on a Lightbox using jQuery

Async pipe in Angular does not work with my custom observables

The code functions properly when run locally, however, it encounters issues when deployed