Componente de formulário personalizado.

Então eu quero criar um componente de formulário pode ser pro formulário assíncrono ou para o formulário normal, onde eu possa dar um nome com ngModel e pegar informações como se fosse um input mesmo.

como exemplo a seguir:

<app-cidades-consulta [(id)]="cidadeID" 
                        #campoCidade="ngModel"
                        *ngIf="campoCidade.invalid && campoCidade.touched">
  </app-cidades-consulta>

o html do componente é só seguinte:

<div class="form-group">
  <label class="form-label">Cidade:</label>
  <div class="input-group">

    <input class="form-control col-md-2 col-3"
           [(ngModel)]="id"
           [class.is-invalid]="error"
           (blur)="selectById(id)">

    <input class="form-control col-md-9 col-7"
           [(ngModel)]="nome"
           [class.is-invalid]="error"
           readonly>

    <div class="input-group-append col-md-1 col-2" style="padding: 0">
      <button class="btn btn-outline-primary btn-block"
              type="button"
              [class.btn-outline-danger]="error"
              (click)="open(content)">
        <i class="fa fa-search-plus"></i>
      </button>
    </div>
  </div>
  <small *ngIf="error" class="text-danger">Cidade invalida</small>
</div>

o atributo [(id)] eu resolvi com @input e @output, mas e o #campoCidade, e o ngIf como resolver?