Q:

Angular 2, Put visible according to the selection of a radiobutton

How can I achieve that when the page is just opened the md-select are invisible and when it is chosen on the radio button  -no- show the first select that is  ¿no? and if you choose -si-tercero- Show only the select ¿si-tercero?, I am a little new in angular, I would very much appreciate that they could help me
This is my html

<div class="row">
  <div class="small-12 columns">
    <md-card class="cards">
      <div class="row">
        <div class="small-6 columns">
          <div class="row">
            <div class="small-6 columns">
              <span>Numero coincidente 3333333333</span>
            </div>
            <div class="small-6 columns">
              <span>Existió Contacto</span>
              <md-radio-group class="radio-vertical">
                <md-radio-button value="0">Sí</md-radio-button>
                <md-radio-button value="1">No</md-radio-button>
                <md-radio-button value="2">Si-Tercero</md-radio-button>
              </md-radio-group>
            </div>
          </div>
        </div>
        <div class="small-6 columns">
          <md-select placeholder="¿No?" class="select_100" floatPlaceholder="never">
            <md-option value="NC">No contesta</md-option>
            <md-option value="TO">Teléfono ocupado</md-option>
            <md-option value="NT">Numero temporalmente fuera de servicio</md-option>
            <md-option value="NE">Numero equivocado</md-option>
            <md-option value="AS">Apagado o sin señal / buzón de mensajes</md-option>
            <md-option value="D">Dañado / no asignado</md-option>
            <md-option value="CA">Caída de avayas</md-option>
            <md-option value="FC">Falla en comunicación</md-option>
            <md-option value="NC">No conoce al cliente</md-option>
            <md-option value="NCC">No corresponde el celular al cliente</md-option>
            <md-option value="CNS">Cliente no reconocer solicitud (posible fraude o fraude confirmado)</md-option>
            <md-option value="ME">Menor de edad, adulto mayor , discapacitados</md-option>
            <md-option value="PO">PBX otra</md-option>
            <md-option value="PE">PBX empresa formulario</md-option>
          </md-select>
          <md-select placeholder=¿Si-Tercero? class="select_100" floatPlaceholder="never">
            <md-option value="-1">Seleccione una opcion</md-option>
            <md-option value="SR">Tercero no suministra nuevo número de contacto pero sirve como referencia</md-option>
            <md-option value="NI">Tercero no suministra información</md-option>
            <md-option value="NN">Tercero suministra nuevo número de contacto</md-option>
            <md-option value="SI">Tercero suministra información y confirma número de contacto</md-option>
          </md-select>
        </div>
      </div>
    </md-card>
  </div>
</div>
<div class="row">
  <div class="small-12 columns">
    <md-card class="cards">
      <div class="row">
        <div class="small-6 columns">
          <div class="row">
            <div class="small-6 columns">
              <span>Numero coincidente 3333333333</span>
            </div>
            <div class="small-6 columns">
              <span>Existió Contacto</span>
              <md-radio-group class="radio-vertical">
                <md-radio-button value="0">Sí</md-radio-button>
                <md-radio-button value="1">No</md-radio-button>
              </md-radio-group>
            </div>
          </div>
        </div>
        <div class="small-6 columns">
          <md-select class="select_100" floatPlaceholder="never">
            <md-option value="NC">No contesta</md-option>
            <md-option value="TO">Teléfono ocupado</md-option>
            <md-option value="NT">Numero temporalmente fuera de servicio</md-option>
            <md-option value="NE">Numero equivocado</md-option>
            <md-option value="AS">Apagado o sin señal / buzón de mensajes</md-option>
            <md-option value="D">Dañado / no asignado</md-option>
            <md-option value="CA">Caída de avayas</md-option>
            <md-option value="FC">Falla en comunicación</md-option>
            <md-option value="NC">No conoce al cliente</md-option>
            <md-option value="NCC">No corresponde el celular al cliente</md-option>
            <md-option value="CNS">Cliente no reconocer solicitud (posible fraude o fraude confirmado)</md-option>
            <md-option value="ME">Menor de edad, adulto mayor , discapacitados</md-option>
            <md-option value="PO">PBX otra</md-option>
            <md-option value="PE">PBX empresa formulario</md-option>
          </md-select>
        </div>
      </div>
    </md-card>
  </div>
</div>

This is my component 

import {
  Component,
  OnInit
} from '@angular/core';
import {
  MdRadioChange,
  MdSelectChange
} from "@angular/material";


@Component({
  selector: 'app-coincidencia',
  templateUrl: './coincidencia.component.html',
  styleUrls: ['./coincidencia.component.css']
})
export class CoincidenciaComponent implements OnInit {

  constructor() {}

  ngOnInit() {}

}

A:

You are on right track. You just need to put an ngModel to get the value from the radio buttons and add *ngIf conditions to md-select. Based on ngIf conditions both md-select will hide/show.
Highlighting the main part of the code:
<md-radio-group class="radio-vertical" [(ngModel)]="radioValue">
    <md-radio-button value="0">Sí</md-radio-button>
    <md-radio-button value="1">No</md-radio-button>
    <md-radio-button value="2">Si-Tercero</md-radio-button>
</md-radio-group>

<md-select *ngIf="radioValue == 1"  placeholder="¿No?" class="select_100" floatPlaceholder="never">
    <md-option></md-option>
     .
     .
     .
    <md-option></md-option>
</md-select>
<md-select *ngIf="radioValue == 2" placeholder=¿Si-Tercero? class="select_100" floatPlaceholder="never">
    <md-option></md-option>
     .
     .
     .
    <md-option></md-option>
</md-select>

Plnkr demo

