Is there an Angular way of doing: document.getElementById(id).style.display = "none";-CodePudding

I have a div with the id of 1. I'm trying to set the display to none dynamically. Is there an Angular way of doing this. Currently, I'm using vanilla javascript. I was asking about doing this dynamically because there will be over 60 divs that will be created from an array.

In my html

<div *ngFor="let item of items; i = index;">
    <div id={{i}} (click)=hideDiv()></div> 
</div>

In my method

hideDiv() {
return document.getElementById('1').style.display = "none";
}

That works but I'm looking for the Angular way of doing the above.

It was suggested that I use @ViewChild. Here's what I've changed. I can't use a Template Reference Variable as the html divs are created dynamically. Unless someone can let me know how to create the template variables dynamically. Although I don't think it's possible to create template variables with a loop.

@ViewChild('imgId', { static: true }) elementRef: ElementRef<HTMLDivElement>;
imgId: string;

Then in the method I have:

this.imgId = event.path[0].attributes[1].value;
 this.elementRef.nativeElement.style.display = "none";

The event.path[0].attributes[1].value gets me the id of the image. The imgId shows when I console log it. It's still not changing the display on the div to none. Also I'm getting the error: Cannot read properties of undefined (reading 'nativeElement')

CodePudding user response：

Yes, you can use the ViewChild query in Angular to do this. In your component, define a query like this:

@ViewChild('#1') elementRef: ElementRef<HTMLDivElement>;

Implement the AfterViewInit interface in your component, and inside it, use this:

this.elementRef.nativeElement.style.display = "none";

CodePudding user response：

You can simply use ngIf for this

Component

  shouldDisplay: boolean = true;

  hide(): void {
    this.shouldDisplay = false;
  }
  show(): void {
    this.shouldDisplay = true;
  }

Html

<button (click)="hide()">Hide</button>
<button (click)="show()">Show</button>
<div *ngIf="shouldDisplay">this is the content</div>

Here is the working example

CodePudding user response：

This is the Angular way: template

<div *ngIf="showMe"></div>

<div [hidden]="!showMe"></div>

TypeScript:

showMe: boolean;

hideDiv() {
    this.showMe = false;
}

CodePudding user response：

For dynamic items where your don't know how many you will get the best approach would be to add a directive that would store and adjust that for you:

@Directive({ selector: '[hide-me]' })
export class HideDirective {
  @Input() id!: string;
  @HostBinding('style.display')
  shouldShow: string = '';
}

then in your component just address them by ID:

@Component({
  selector: 'my-app',
  styleUrls: ['./app.component.css'],
  template: `
  <div *ngFor="let item of items; let index = index;">
    <div hide-me id="{{index}}" (click)="hideDiv(index)">Some value</div> 
  </div>
`,
})
export class AppComponent {
  @ViewChildren(HideDirective) hideDirectives!: QueryList<HideDirective>;

  items = [null, null, null];

  hideDiv(id: number) {
    this.hideDirectives.find((p) => p.id === id.toString()).shouldShow = 'none';
  }
}

Stackblitz: https://stackblitz.com/edit/angular-ivy-pnrdhv?file=src/app/app.component.ts

An angular official example: https://stackblitz.com/edit/angular-ivy-pnrdhv?file=src/app/app.component.ts