How to eliminate certain elements from the DOM in Angular 5

Question

How to eliminate certain elements from the DOM in Angular 5

I'm facing a minor issue in my Angular/Typescript project that I can't seem to resolve. I am still new to these technologies and struggling with removing certain DOM elements. The content is auto-generated with specific CSS classes, and unfortunately, I cannot modify them as they are generated elsewhere. This limits me from using ngIf or any other method to simplify the process. What I aim to accomplish is similar to the following (in jQuery):

$("#button").click(function() {
    $('.fc-oss').toggle();
 });

I have a toggle and want it to hide/show all elements with a specific type when activated. While attempting this in Angular without jQuery, I haven't had much luck. Any suggestions on how I could achieve this?

javascript jquery angular typescript angular5

Answer 1

Answer №1

One way to access the DOCUMENT in Angular is by using direct access.

import { Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';

@Injectable()
export class MyService {
  constructor(@Inject(DOCUMENT) private document: any) {}
}

With this approach, you can manipulate elements and define specific behavior for them.

let element = this.document.getElementbyClassName('fc-oss');
element.style.display = element.style.display === 'none' ? 'block' : 'none';

Answer 2

One way to access the DOCUMENT in Angular is by using direct access.

import { Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';

@Injectable()
export class MyService {
  constructor(@Inject(DOCUMENT) private document: any) {}
}

With this approach, you can manipulate elements and define specific behavior for them.

let element = this.document.getElementbyClassName('fc-oss');
element.style.display = element.style.display === 'none' ? 'block' : 'none';

Answer 3

Answer №2

To control visibility in your Angular project, use the directive *ngIf="booleanVar". Initialize it as 'booleanVar = true' in your typescript file and add a button to toggle visibility:

<br><button (click)="booleanVar = !booleanVar">Toggle visibility</button>

Answer 4

To control visibility in your Angular project, use the directive *ngIf="booleanVar". Initialize it as 'booleanVar = true' in your typescript file and add a button to toggle visibility:

<br><button (click)="booleanVar = !booleanVar">Toggle visibility</button>

Answer 5

Answer №3

If you want to toggle visibility, the ngif directive is the way to go.

@Component({
  selector: 'toggle-visibility',
  template: `
    <button (click)="isVisible = !isVisible">{{isVisible ? 'hide' : 'show'}}</button>
    current state: {{isVisible}}
    <br>
    <div *ngIf="isVisible">Content to display</div>
`
})
class ToggleVisibility {
  isVisible: boolean = true;
}

By changing the value of the variable isVisible, you can control the visibility of the div element.

Answer 6

If you want to toggle visibility, the ngif directive is the way to go.

@Component({
  selector: 'toggle-visibility',
  template: `
    <button (click)="isVisible = !isVisible">{{isVisible ? 'hide' : 'show'}}</button>
    current state: {{isVisible}}
    <br>
    <div *ngIf="isVisible">Content to display</div>
`
})
class ToggleVisibility {
  isVisible: boolean = true;
}

By changing the value of the variable isVisible, you can control the visibility of the div element.

How to eliminate certain elements from the DOM in Angular 5

Answer №1

Answer №2

Answer №3

Similar questions

Adjustments to the positioning of masonry columns

Executing javascript function using setInterval

Do you want to reset the validation for the paper input?

Prevent displaying page confirmation prompts when a user clicks on hyperlinks

Issue with React component not updating content after state changes in Next.js framework

Solving repeated function firing with ng-checked in an AngularJS ng-repeat loop

React Hooks: In useEffect(), unable to modify parent component's state

Unraveling the mysteries of this PHP-generated object

Unable to include an additional parameter within a JavaScript function

The utilization of angular2-materialize is not possible due to an error message indicating that jQuery.easing is undefined

Issues arise when attempting to determine the accurate dimensions of a canvas

Error encountered during Ionic iOS build caused by google-plus plugin

.functioning live, malfunctioning on

Tips for Saving process.argv in a .js File for Future Reference

The code in check.js causes a square of dots to emerge on the screen in Skype

Get updates on a new subscription for Angular by signing up now

Refresh the DATATABLE inside an AJAX call without reloading the entire page

Include a hash in the URL when the current location is entered into the view by scrolling

What is the best way to ascertain the variance between two Immutable.js Maps?

"Exploring the Possibilities: Foundation 4 Reveal and WP AJAX for Creating Previous/Next Modal Windows within an Open Modal