title: How to display/Hide a div based on a radio button selection in angular 6?
body: <p>My HTML file,</p>
  
  <pre><code>  &lt;input type="radio" id="com" name="communication" value="full" (click)= "function(1)"&gt;
     &lt;input type="radio" id="com2" name="communication" value="half" (click)= "function(2)"&gt;
     &lt;input type="radio" id="com3" name="communication" value="oth" (click)= "function(3)"&gt;
  
    &lt;div id="Flag1" [disabled]="Flag1" [(ngModel)]="Flag1" ngDefaultControl&gt;
  
    some content....A
    &lt;/div&gt;
    &lt;div id="Flag2" [disabled]="Flag2" [(ngModel)]="Flag2" ngDefaultControl&gt;
  
    some content....B
    &lt;/div&gt;
    &lt;div id="Flag3" [disabled]="Flag3" [(ngModel)]="Flag3" ngDefaultControl&gt;
  
    some content....C
    &lt;/div&gt;
  </code></pre>
  
  <p>My ts file:</p>
  
  <pre><code>Flag1=false;
  Flag2=false; 
  Flag3=false; 
  function(x) {
  if(x==1){
      alert("inside 1");
    this.Flag1=false;
    this.Flag2=false;
    this.Flag3=false;
  }
  else if(x==2){
      alert("inside 2");
    this.Flag1=false;
    this.Flag2=false;
    this.Flag3=false;
  
  }
  else if(x==3){
      alert("inside 3");
    this.Flag1=true;
    this.Flag2=true;
    this.Flag3=true;
   }
  }
  </code></pre>
  
  <p>If i click on first &amp; second radio btn, I need to hide all other div. If I click on third btn I need to display all the div. But this doesnt seems to affect my html page. Can anybody tell me how to do this in angular 6?</p>