title: How can I show my modal outside my sidenav? I'm using :host. Angular
body: <p>I have a :host with hostlistener() in my navmenu-component.ts. I made this so I can have a sidemenu which slides out of my sidenavbar when i press a button.</p>
  <p>I want to call a modal to edit something. So I have made a modal in the navmenu-component.html. Whenever I call my modal it shows in the collapsable menu.</p>
  <p>I don't know how I can make this show outside my collapsable menu, I think it has something to do with my :host but i can't seem to find out what to do.</p>
  <p>here are my components</p>
  <p>this is my navmenu-component.html</p>
  <pre><code>    &lt;div  class=&quot;environmentHolder w100&quot; (click)=&quot;openClose()&quot;&gt;
          &lt;div class=&quot;dropdown-env&quot; &gt;
              &lt;div class=&quot;header&quot;&gt;
                  &lt;p&gt;{{textDDL}}&lt;fa-icon [icon]=&quot;arrow&quot;&gt;&lt;/fa-icon&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div *ngIf=&quot;environments.length == 0; else divFilled&quot;&gt;
              &lt;div class=&quot;dropdown-env-content slidedown&quot; #ddl &gt;
                  &lt;p (click)='goToEnv()'&gt;Create New Environment &lt;fa-icon [icon]=&quot;plus&quot;&gt;&lt;/fa-icon&gt;&lt;/p&gt;
                  &lt;h6&gt;0/2&lt;/h6&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;ng-template #divFilled&gt;
              &lt;div class=&quot;dropdown-env-content slidedown1env&quot; #ddl *ngFor=&quot;let item of environments&quot;&gt; 
      
                  &lt;input type=&quot;image&quot; id=&quot;dropbtn&quot; src=&quot;assets/menu.png&quot; style=&quot;width: 30px; height: 20px; border: none; transform: rotate(90deg);&quot;  aria-controls=&quot;drop1&quot; class=&quot;button dropdown&quot; (click)=&quot;openMenu()&quot;/&gt;&lt;br&gt;
                  &lt;ul id=&quot;drop1&quot; data-dropdown-content class=&quot;f-dropdown&quot; style=&quot;display: none; margin-right: 15px;&quot;&gt;
                      &lt;li&gt;&lt;a (click)=&quot;goToEnvUpdate(item.id)&quot; #editButton &gt;Edit&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a #deleteButton &gt;Delete&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
      
                  &lt;p [ngClass]=&quot;isVisible&quot; *ngFor=&quot;let env of environments&quot; (click)=&quot;getEnvironment(env.id)&quot; &gt;{{env.name}}&lt;/p&gt;
                  &lt;div *ngIf=&quot;environments.length &amp;lt; 2&quot;&gt;
                      &lt;p (click)='goToEnv()' [ngClass]=&quot;isVisible&quot;&gt;Create New Environment &lt;fa-icon [icon]=&quot;plus&quot;&gt;&lt;/fa-icon&gt;&lt;/p&gt; 
                  &lt;/div&gt;
                  &lt;div *ngIf=&quot;environments.length == 1&quot;&gt;&lt;h6 [ngClass]=&quot;isVisible&quot;&gt;1/2&lt;/h6&gt;&lt;/div&gt;
                  &lt;div *ngIf=&quot;environments.length == 2&quot;&gt;&lt;h6 [ngClass]=&quot;isVisible&quot;&gt;2/2&lt;/h6&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/ng-template&gt;
          
          &lt;div class=&quot;foldable-title&quot;&gt;
              &lt;p&gt;Application&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;foldable-content&quot;&gt;
              &lt;div (click)=&quot;toggleMenu()&quot;&gt;
                  &lt;a class=&quot;foldable-text&quot; href=&quot;&quot;&gt;Overview&lt;/a&gt;&lt;br&gt;
              &lt;/div&gt;
              
              &lt;a class=&quot;foldable-text&quot; href=&quot;&quot;&gt;Create new&lt;/a&gt;&lt;br&gt;
              &lt;a class=&quot;foldable-text&quot; href=&quot;&quot;&gt;Open&lt;/a&gt;
          &lt;/div&gt;
      
          &lt;div class=&quot;foldable-title&quot;&gt;
              &lt;p&gt;Business Process&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;foldable-content&quot;&gt;
              &lt;a class=&quot;foldable-text&quot; href=&quot;&quot;&gt;Overview&lt;/a&gt;&lt;br&gt;
              &lt;a class=&quot;foldable-text&quot; href=&quot;&quot;&gt;Create new&lt;/a&gt;&lt;br&gt;
              &lt;a class=&quot;foldable-text&quot; href=&quot;&quot;&gt;Open&lt;/a&gt;
          &lt;/div&gt;
      
          &lt;div class=&quot;foldable-title&quot;&gt;
              &lt;p&gt;Capability&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;foldable-content&quot;&gt;
              &lt;a class=&quot;foldable-text&quot; href=&quot;&quot;&gt;Overview&lt;/a&gt;&lt;br&gt;
              &lt;a class=&quot;foldable-text&quot; href=&quot;&quot;&gt;Create new&lt;/a&gt;&lt;br&gt;
              &lt;a class=&quot;foldable-text&quot; href=&quot;&quot;&gt;Open&lt;/a&gt;
          &lt;/div&gt;
      
          &lt;div class=&quot;foldable-title&quot;&gt;
              &lt;p&gt;Program &amp; Project&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;foldable-content&quot;&gt;
              &lt;a class=&quot;foldable-text&quot; href=&quot;&quot;&gt;Overview&lt;/a&gt;&lt;br&gt;
              &lt;a class=&quot;foldable-text&quot; href=&quot;&quot;&gt;Create new&lt;/a&gt;&lt;br&gt;
              &lt;a class=&quot;foldable-text&quot; href=&quot;&quot;&gt;Open&lt;/a&gt;
          &lt;/div&gt;
      
          &lt;div class=&quot;foldable-title&quot;&gt;
              &lt;p&gt;Resource&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;foldable-content&quot;&gt;
              &lt;a class=&quot;foldable-text&quot; href=&quot;&quot;&gt;Overview&lt;/a&gt;&lt;br&gt;
              &lt;a class=&quot;foldable-text&quot; href=&quot;&quot;&gt;Create new&lt;/a&gt;&lt;br&gt;
              &lt;a class=&quot;foldable-text&quot; href=&quot;&quot;&gt;Open&lt;/a&gt;
          &lt;/div&gt;
      
          &lt;div class=&quot;foldable-title&quot;&gt;
              &lt;p&gt;Strategy&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;foldable-content&quot;&gt;
              &lt;a class=&quot;foldable-text&quot; href=&quot;&quot;&gt;Overview&lt;/a&gt;&lt;br&gt;
              &lt;a class=&quot;foldable-text&quot; href=&quot;&quot;&gt;Create new&lt;/a&gt;&lt;br&gt;
              &lt;a class=&quot;foldable-text&quot; href=&quot;&quot;&gt;Open&lt;/a&gt;
          &lt;/div&gt;
      
          &lt;div class=&quot;foldable-title&quot;&gt;
              &lt;p&gt;SWOT-analysis&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;foldable-content&quot;&gt;
              &lt;a class=&quot;foldable-text&quot; href=&quot;&quot;&gt;Overview&lt;/a&gt;&lt;br&gt;
              &lt;a class=&quot;foldable-text&quot; href=&quot;&quot;&gt;Create new&lt;/a&gt;&lt;br&gt;
              &lt;a class=&quot;foldable-text&quot; href=&quot;&quot;&gt;Open&lt;/a&gt;
          &lt;/div&gt;
      &lt;br&gt;
      &lt;app-collapse [@slideInOut]=&quot;menuState&quot; &gt;&lt;/app-collapse&gt;
  &lt;/div&gt;
  
  
  &lt;div class=&quot;outside-navMenu&quot;&gt;
      &lt;div #editModal class=&quot;modal&quot;&gt;
          &lt;div class=&quot;card w40&quot;&gt;
              &lt;form [formGroup]=&quot;environmentForm&quot; class=&quot;form&quot; (ngSubmit)=&quot;onSubmit()&quot;&gt;
              &lt;div class=&quot;card-title&quot;&gt;
                &lt;p&gt;Update your environment&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class=&quot;card-body&quot;&gt;
                &lt;br /&gt;
                &lt;div class=&quot;card-input&quot;&gt;
                  &lt;input formControlName=&quot;name&quot; type=&quot;text&quot; class=&quot;input w70&quot; placeholder=&quot;Name&quot; /&gt;
                &lt;/div&gt;
                &lt;br /&gt;
                &lt;br /&gt;
                &lt;button class=&quot;btn btn-primary-create&quot; type=&quot;submit&quot;&gt;save&lt;/button&gt;&lt;br /&gt;&lt;br /&gt;
              &lt;/div&gt;
              &lt;/form&gt;
              &lt;div class=&quot;bar&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  <p>this is my navmenu-component.css</p>
  <pre><code>:host {
      margin-left: -400px; /* makes menu dissapear when collapsed */
      padding-left: 140px;
      color: #17313e;
      background-color: white;
      height:96.81%;
      width: 380px;
      position: fixed;
      border-radius: 0 30px 30px 0; 
      box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.2);
      z-index: 1000;
      top: 0;
      left: 0;
      overflow-x: hidden;
      padding-top: 20px;
      transition: 0.5s;
      bottom: 2em;
  }
  
  
  .foldable-title p {
      padding-top: 1em;
      font-style: normal;
      font-size: 18pt;
      transition: 0.3s;
  }
  
  .foldable-content {
      padding-bottom: 1em;
      padding-left: 2.5em;
      border-left: 2px solid #a4a4a4;
      height: 11.5%;
      transition: 0.3s;
  }
  
  .foldable-text {
      font-size: 14pt;
      font-style: normal;
      color: #787878;
      text-decoration: none;
      line-height: 2;
      transition: 0.3s;
  }
  
  .foldable-text:hover{
      color: #56a5da;
  }
  
    /* editbutton */
  #dropbtn{
    float: right;
    width: 10px;
    height: 10px;
    margin: 0;
  }
  
  #deleteButton{
      cursor: pointer; 
  }
  
  #editButton{
      cursor: pointer; 
  }
  
  a{
      color: #17313e;
      text-decoration: none;
  }
  li {
      list-style-type: none;
      text-align: left;
  }
  ul {
      padding: 2px;
      padding-bottom: 4px;
      margin-top: -10px;
  }
  ul :hover {
      background-color: #f0f0f0;
  }
  
  #drop1{
      display: none;
  }
  
  .f-dropdown {
      z-index: 1000;
      background-color: white;
      width: 60px;
      float: right;
      border-radius: 5px;
      box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.2);
    }
  
  /* dropdown */
  .environmentHolder:hover{
      cursor: pointer;
  }
  .environmentHolder{
      position: relative;
  }
  .dropdown-env{
      margin-top: 15px;
      width: 220px;
      height: 2em;
      background-color: rgb(243, 241, 241);
      margin-right: 20px;
      border-radius: 5px;
      color: #17313E;
  }
  .dropdown-env p{
      padding-top: 1.3%;
      padding-left: 5%;
      position: relative;
  }
  
  .dropdown-env-content{
      width: 220px;
      color: #17313E;
      background-color: rgb(243, 241, 241);
      margin-right: 20px;
      border-radius: 0 0 5px 5px;
      margin-top: -4px;
      position: absolute;
      z-index: 3;
      display: none;
      height: auto; 
      box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.2);
  }
  
  .dropdown-env-content p:hover{
      background-color: rgb(223, 223, 223);
  }
  
  .dropdown-env-content p:nth-child(1){
      margin-top: 2%;
      padding-left: 5%;
  }
  
  .dropdown-env-content p{
      padding-top: 0;
      margin-bottom: 2%;
      padding-left: 5%;
  }
  
  fa-icon{
      color:#17313E;
      position: absolute;
      right: 5%;
  }
  
  h6{
      color:#17313E;
      font-size: .7em;
      text-align: right;
      margin: 0;
      padding-right: 4.6%;
      padding-bottom: 3%;
      font-weight: 400;
  }
  
  .slidedown{
      animation-duration: 0.3s;
      animation-name: lineInserted;
      transition: height 0.3s;
  }
  .slidedown1env{
      animation-duration: 0.3s;
      animation-name: lineInserted1env;
      transition: height 0.3s;
  }
  .d-none{
      display: none;
  }
  .d-block{
      display: block;
  }
  
  /* Modal */
  .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 9999; /* Sit on top */
      top: 0;
      left: 0;
      padding-left: 25%;
      padding-top: 10em;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }
  
    .outside-navmenu{
        width: 100%;
        height: 100%;
    }
  </code></pre>
  <p>this is my navmenu-component.ts</p>
  <pre><code>import { NumberSymbol } from '@angular/common';
  import { Component, ElementRef, HostListener, Input, OnInit, Renderer2, ViewChild } from '@angular/core';
  import { FormBuilder, FormGroup, NgModel, Validators } from '@angular/forms';
  import { Router, ActivatedRoute } from '@angular/router';
  import { faChevronDown, faPlus } from '@fortawesome/free-solid-svg-icons';
  import { Capability } from 'src/app/services/capability/Capability';
  import { Environment } from 'src/app/services/environments/Environment';
  import { EnvironmentsService } from 'src/app/services/environments/environments.service';
  import { Strategy } from 'src/app/services/strategy/strategy';
  
  @Component({
    selector: 'app-nav-menu',
    templateUrl: './nav-menu.component.html',
    styleUrls: ['./nav-menu.component.css'],
    animations: [
      trigger('slideInOut',  [
        state('in', style({
          transform: 'translate3d(0,0,0)'
        })),
        state('out', style({
          transform: 'translate3d(100%, 0, 0)'
        })),
        transition('in =&gt; out', animate('300ms ease-in-out')),
        transition('out =&gt; in', animate('300ms ease-in-out')),
      ])
    ]
  })
  
  /**
   * @class
   * this class will create sliding behaviour for the nav menu
   */
  export class NavMenuComponent implements OnInit {
    @ViewChild('editModal', { static: false }) editModal: any;
    @ViewChild('ddl', { static: false }) ddl: any;
  
    filterModel!: NgModel;
  
    arrow = faChevronDown;
    plus = faPlus;
  
    textInvisible: boolean = true;
  
    environment!: Environment;
    newEnvironment: Environment
    environments: Environment[] = [];
    environmentForm: FormGroup;
    textDDL: String = 'Select Environment';
  
    private capabilities: Capability[] = [];
    envCapabilities: Capability[] = [];
    filteredCapabilities: Capability[] = [];
  
    strategy: Strategy;
    view: any;
  
    menuState:string = 'out';
  
    constructor(
      private el:ElementRef, 
      private renderer:Renderer2,
      private es: EnvironmentsService,
      private router: Router,
      private route: ActivatedRoute,
      private fb: FormBuilder,
      private environmentService: EnvironmentsService
      ) { }
  
    ngOnInit(): void {
      this.getEnvironments();
      this.createForm();
    }
  
    createForm(){
      this.environmentForm = this.fb.group({
        name: ['',Validators.required]
      })
    }
  
    updateEnvironment(){
      this.newEnvironment = new Environment(
        this.environmentForm.value.name
      )
      this.environmentService.updateEnvironment(this.environment.id, this.newEnvironment).subscribe(
        (res) =&gt; {
          console.log(this.newEnvironment)
          this.router.navigate(['/'])
        }
      )
    }
  
    /**
     * @method
     * @returns this method will check if the form is valid, based on that it will either return an alert or call the update environment method
     */
    onSubmit(){
      if (!this.environmentForm.valid){
        alert(&quot;form not valid&quot;);  
        return 
      }
      this.updateEnvironment();
    }
  
    getEnvironments() {
      this.es.getAllEnvironments().subscribe((data) =&gt; {
        this.environments = data;
        console.log(this.environments);
      });
    }
  
    open() {
      this.ddl.nativeElement.style.display = 'block';
      this.isVisible(true);
    }
  
    close() {
      this.ddl.nativeElement.style.display = 'none';
      this.isVisible(false);
    }
  
    openClose() {
      if (this.ddl.nativeElement.style.display == 'block') {
        this.ddl.nativeElement.style.display = 'none';
      } else {
        this.ddl.nativeElement.style.display = 'block';
      }
    }
  
    changeDDLtext(name: String) {
      this.textDDL = name;
    }
  
    waitedText() {
      setTimeout(() =&gt; {
        this.textInvisible = true;
      }, 500);
    }
  
    isVisible(flag: boolean): string {
      if (flag) {
        return 'd-block';
      } else {
        return 'd-none';
      }
    }
  
    getEnvironment(id?: number) {
      this.environment = this.environments.filter((x) =&gt; x.id == id)[0];
      this.changeDDLtext(this.environment.name);
      console.log(this.environment);
      if(this.environment.strategy != null){
        this.strategy = this.environment.strategy
      }
      this.envCapabilities = this.capabilities.filter(x =&gt; x.environment.id == id);
      this.filteredCapabilities = this.envCapabilities;
      //console.log(this.envCapabilities)
    }
  
    goToEnv(){
      this.router.navigate(['/environment/create']);
    }
  
    goToEnvUpdate(id: number){
      this.getEnvironment(id);
      this.editModal.nativeElement.style.display = &quot;block&quot;;
     // this.router.navigate(['/environment/update'], {state: {environment: this.environment}})
   }
  
   openMenu() {
    this.view = document.querySelector(&quot;#drop1&quot;)
    if(this.view.style.display === &quot;none&quot;) {
      this.view.style.display = &quot;block&quot;
    } else {
      this.view.style.display = 'none'
    }
  }
  
  openDelete(id: any) {
    
  }
  
  closeDelete() {
    
  }
    
    @HostListener('click', ['$event.target'])
    onClick(target:any){
      let item = this.el.nativeElement.querySelector('div');
    }
  
    toggleMenu(){
      this.menuState = this.menuState === 'out' ? 'in' : 'out';
    }
  
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/bZFQU.png" rel="nofollow noreferrer">here is how it looks</a></p>