title: display only one div in modal popup dialog box in angular from templateurl html file
body: <p>I have 2 div in my template urls and from ts file i need to call only particular div but when i give <code>dialog.open</code>, both the div are getting displayed in popup dialog box.</p>
  <p>When the page is loaded, i want only A div should be loaded.</p>
  <p>When i click openDialog , B Div should be displayed
  But both the div is getting displayed.</p>
  <p>passHist.component.html</p>
  <h2>First div</h2>
  <pre><code>&lt;div id=&quot;A&quot;&gt;
    &lt;li&gt;
      &lt;button mat-raised-button (click)=&quot;openDialog()&quot;&gt;Password History&lt;/button&gt;
    &lt;/li&gt;
  &lt;/div&gt;
  </code></pre>
  <h2>Second div</h2>
  <pre><code>&lt;div id=&quot;B&quot;&gt;
    &lt;div&gt;
      &lt;h1 mat-dialog-title&gt;Password History&lt;/h1&gt;
    &lt;/div&gt;
    some content inside
  &lt;/div&gt;
  </code></pre>
  <h1>TS File</h1>
  <h1>passHist.component.ts</h1>
  <pre><code>openDialog(ispassButton, ispassContent): void {
      const dialogRef = this.dialog.open(PassHistComponent, {
        width: &quot;1000px&quot;
      });
    }
  
  @Component({
    selector: 'app-modal',
    templateUrl: '.passHist.component.html',
    styleUrls: ['.passHist.component.css']
  })
  </code></pre>
  <p>Please help and provide suggestions how to do this
  Thanks</p>
  <p>Both A and B div is getting displayed in popup dialog
  but inside only B div should be displayed.</p>