Access HTML elements inside an Angular component

Asked

Viewed 798 times

-2

I have a Dashboard:

<app-navbar></app-navbar>

<div style="display: flex; height: 90vh;">
  <app-sidebar id="sidebar" class="hide"></app-sidebar>

  <app-funil></app-funil>

</div>

and within that Dashboard, I call my sidebar (which is also a component), and the app-funnel component'.

So far so good, but inside the funnel, I have a button, which has the effect of making the sidebar appear and disappear, and I need to access this button that is inside the funnel through the Dashboard TS, but I’m not getting it.

This is my Dashboard TS, with the function to make the sidebar appear and disappear:

  handleShowSidebar() {
    document.getElementById('showSidebar').addEventListener("click", function() {
      document.getElementById('sidebar').classList.toggle('hide')
    })
  }

  ngOnInit() {
    this.handleShowSidebar();
  }
html angular component
  • 1

    Dear Arthur in Angular and similar It would be better to control the classes by ngClass, instead of redoing what exists ready, even the click event would be better controlled on the own (click)= that already exists in the structure of Angular.... it seems to me that your intention to control via pure JS is perhaps by inexeriencia with Angular, which makes this a problem of XY PS: the downvote is not mine.

  • I don’t see why use ngClass, because they’re not the same components: In this case, I have 3 (Dashboard, Funnel and Sidebar), I need to pick up INSIDE the funnel, click the button, and make INSIDE the Dashboard, it makes the Sidebar component disappear...

  • 2

    Dear Arthur ngClass, click, ngFor, ngIf work with your HTML, it doesn’t need to be a component, as I said, I think that in fact you still don’t quite understand the Angular and so this reinventing the wheel for a feature that already exists in the angular.

  • Yes dear, but it needs to be a component, because this 'funnel' will be replaced by another component, once you click on the sidebar, so the solution cannot come from HTML...

  • 1

    blz, I tried to explain, I’ll try to say otherwise, you’re trying to do something that you can do directly in Angular, will trigger the same event, what you have to learn is how ngClass works with variables and even Ifs within the angular syntax itself or the object of the class belonging to the specific "template". Believe me, you can do all this without having to do the event and selection of elements.

  • 2

    Arthur gives a search on @Input and @Output that make the communication between components in the Angular the first vc passes values of the parent component(Dashboard) pro filho(funnel) and the second emits values of the child pro pai.

Show 1 more comment

1 answer

1

I was able to use Angular Input and Output to solve this problem, so instead of passing the reference of a button, I passed the click event, this way:

TS Funnel (Son):

  @Input() showSidebar: boolean = false;

  @Output() situationSidebar = new EventEmitter();

  onClick() {
    this.showSidebar = !this.showSidebar;
    this.situationSidebar.emit({ situation: this.showSidebar })
  }

with the button: 

<button class="buttons" id="showSidebar" (click)="onClick()">Menu</button>

and calling it the Dashboard component (Father):

onChangeSidebar() {
  document.getElementById('sidebar').classList.toggle('hide')
}

with HTML: 

<app-navbar></app-navbar>

<div style="display: flex; height: 90vh;">
  <app-sidebar id="sidebar" class="hide"></app-sidebar>

  <app-funil (situationSidebar)="onChangeSidebar()"></app-funil>

</div>

  • Good is that, trying and learning always!

Browser other questions tagged html angular component

You are not signed in. Login or sign up in order to post.