How to use the @angular/core.ViewChild function in @angular/core

<span class="test-copy-replace">Test</span>
  `
})
export class NzTestTypographyCopyComponent {
  onCopy(_text: string): void {
    // noop
  }
}

@Component({
  template: `
    <p></p>
  `
})
export class NzTestTypographyEditComponent {
  @ViewChild(NzTypographyComponent, { static: false }) nzTypographyComponent: NzTypographyComponent;
  str = 'This is an editable text.';
  onChange = (text: string): void =&gt; {
    this.str = text;
  };
}

@Component({
  template: `
    <p class="single">
      Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background
      applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant
      Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background
      applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
    </p>
    <br>
    <p class="multiple"></p>

* |-- Breadcrumb (in region view a way of navigating back up through regions)
 */
@Component({
  selector: 'onos-topology',
  templateUrl: './topology.component.html',
  styleUrls: ['./topology.component.css']
})
export class TopologyComponent implements OnInit, OnDestroy {
    // These are references to the components inserted in the template
    @ViewChild(InstanceComponent) instance: InstanceComponent;
    @ViewChild(SummaryComponent) summary: SummaryComponent;
    @ViewChild(DetailsComponent) details: DetailsComponent;
    @ViewChild(ToolbarComponent) toolbar: ToolbarComponent;
    @ViewChild(BackgroundSvgComponent) background: BackgroundSvgComponent;
    @ViewChild(ForceSvgComponent) force: ForceSvgComponent;
    @ViewChild(ZoomableDirective) zoomDirective: ZoomableDirective;

    flashMsg: string = '';
    prefsState = {};
    hostLabelIdx: number = 1;
    showBackground: boolean = false;
    lionFn; // Function

    constructor(
        protected log: LogService,
        protected fs: FnService,
        protected ks: KeysService,
        protected sus: SvgUtilService,
        protected ps: PrefsService,
        protected wss: WebSocketService,
        protected zs: ZoomService,
        protected ts: TopologyService,

@Input()
    isViewOnly: boolean;

    @Input()
    isGeneralEditor = false;





    @ViewChild('f', { static: false })
    public form;

    // ViewChilds Required because ngIf hides template variables from global scope
    @ViewChild('userName', { static: false })
    public userName;

    @ViewChild('userPassword', { static: false })
    public userPassword;

    @ViewChild('email', { static: false })
    public email;

    @ViewChild('currentPassword', { static: false })
    public currentPassword;

    @ViewChild('newPassword', { static: false })
    public newPassword;

    @ViewChild('confirmPassword', { static: false })
    public confirmPassword;

import {RevertComponent} from '../../project-share/revert/revert.component';

@Component({
  selector: 'app-services',
  templateUrl: './services.component.html',
  styleUrls: ['./services.component.css']
})
export class ServicesComponent implements OnInit, AfterViewInit {
  deleteItem: ServiceItem;
  domain: string;
  selectedItem: ServiceItem;
  revertItem: ServiceItem;
  dataSource: MatTableDataSource;
  displayedColumns = ['actions', 'name', 'serviceId', 'serviceType', 'description'];

  @ViewChild(PaginatorComponent, { static: true })
  paginator: PaginatorComponent;

  constructor(private route: ActivatedRoute,
              private router: Router,
              private service: ServiceViewService,
              public appService: AppConfigService,
              public dialog: MatDialog,
              public snackBar: MatSnackBar,
              public breakObserver: BreakpointObserver) {
  }

  ngOnInit() {
    this.route.data
      .subscribe((data: { resp: ServiceItem[]}) => {
        this.dataSource = new MatTableDataSource(data.resp);
        this.dataSource.paginator = this.paginator.paginator;

private searchHelpShow:boolean = false;
  private forceShowAll:boolean = false;
  private viewMode:string = ShopPriceListComponent.PRICELIST;

  private pricelist:SearchResultVO;
  private pricelistFilter:string;
  private pricelistFilterRequired:boolean = true;

  private delayedFiltering:Future;
  private delayedFilteringMs:number = Config.UI_INPUT_DELAY;

  private selectedPricelist:PriceListVO;

  private pricelistEdit:PriceListVO;

  @ViewChild('deleteConfirmationModalDialog')
  private deleteConfirmationModalDialog:ModalComponent;

  @ViewChild('selectShopModalDialog')
  private selectShopModalDialog:ModalComponent;

  @ViewChild('selectCurrencyModalDialog')
  private selectCurrencyModalDialog:ModalComponent;

  @ViewChild('selectProductModalSkuDialog')
  private selectProductModalSkuDialog:ProductSkuSelectComponent;

  @ViewChild('runTestModalDialog')
  private runTestModalDialog:PromotionTestConfigComponent;

  private deleteValue:String;

*/

import {Component, ViewChild} from '@angular/core';
import {MapInfoWindow, MapMarker} from '@angular/google-maps';

const POLYLINE_PATH: google.maps.LatLngLiteral[] =
    [{lat: 25, lng: 26}, {lat: 26, lng: 27}, {lat: 30, lng: 34}];

/** Demo Component for @angular/google-maps/map */
@Component({
  selector: 'google-map-demo',
  templateUrl: 'google-map-demo.html',
  styleUrls: ['google-map-demo.css']
})
export class GoogleMapDemo {
  @ViewChild(MapInfoWindow) infoWindow: MapInfoWindow;

  center = {lat: 24, lng: 12};
  markerOptions = {draggable: false};
  markerPositions: google.maps.LatLngLiteral[] = [];
  zoom = 4;
  display?: google.maps.LatLngLiteral;
  isPolylineDisplayed = false;
  polylineOptions:
      google.maps.PolylineOptions = {path: POLYLINE_PATH, strokeColor: 'grey', strokeOpacity: 0.8};

  handleClick(event: google.maps.MouseEvent) {
    this.markerPositions.push(event.latLng.toJSON());
  }

  handleMove(event: google.maps.MouseEvent) {
    this.display = event.latLng.toJSON();

import { Component, OnInit, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { NzNotificationService } from 'ng-zorro-antd';
import { BankModel } from '../model/bank.model';
import { EditBankService } from './editbank.service';

@Component({
  selector: 'app-edit-bank',
  templateUrl: './editbank.html',
  styles: [],
})
export class EditBankComponent implements OnInit {
  public isConfirmLoading = false;
  public editBank: BankModel = new BankModel();
  @ViewChild('form') private form: NgForm;

  public visible = {};
  public options: object[] = [];
  public _cityList: any = [];
  public cityLists: any[] = [];
  public cityChecked = {};
  public imgSrc: string;

  constructor (
    private router: Router,
    private route: ActivatedRoute,
    private editBankService: EditBankService,
    private notification: NzNotificationService,
    ) {
  }

textarea {
      padding: 0;
      border: none;
      overflow: auto;
    }`;

@Component({
  template: `
    
      <textarea></textarea>
    `,
  styles: [textareaStyleReset],
})
class AutosizeTextareaWithLongPlaceholder {
  placeholder = 'Long Long Long Long Long Long Long Long Placeholder';
  @ViewChild(MatTextareaAutosize) autosize: MatTextareaAutosize;
}

@Component({
  template: `
    
      
        
          <textarea>            Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
          </textarea>
        
      
    
  `
})
class AutosizeTextareaInATab {}

export class ThyOptionComponent implements OnDestroy, Highlightable {
    private _selected = false;
    private _hidden = false;
    @Input() thyValue: any;

    @Input() thyRawValue: any;

    @Input() thyLabelText: string;

    @Input() thyShowOptionCustom: boolean;

    @Input() thySearchKey: string;

    @HostBinding('class.thy-option-item') _isOptionItem = true;

    @ViewChild(TemplateRef) template: TemplateRef;

    @Input()
    @HostBinding(`class.disabled`)
    thyDisabled: boolean;

    disabled?: boolean;

    @HostBinding('class.hidden')
    get hidden(): boolean {
        return this._hidden;
    }

    /** Whether or not the option is currently selected. */
    @HostBinding(`class.active`)
    get selected(): boolean {
        return this._selected;

import { StructureModel } from 'src/app/core/store/models/structure.model';

@Component({
    selector: 'ode-mass-mail',
    templateUrl: './mass-mail.component.html',
    host: {
        '(document:click)': 'onClick($event)',
    },
    styleUrls: ['./mass-mail.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush


})
export class MassMailComponent extends OdeComponent implements OnInit, OnDestroy {

    @ViewChild('filtersDiv', {static: false}) filtersDivRef: ElementRef;
    @ViewChild('filtersToggle', {static: false}) filtersToggleRef;
    users: UserModel[];
    filters: {};
    inputFilters = {lastName: '', firstName: '', classesStr: ''};
    countUsers = 0;
    countUsersWithoutMail = 0;
    userOrder: string;
    structureId: string;
    show = false;
    private deselectItem = false;
    dateFilter: string;
    dateFormat: Intl.DateTimeFormat;
    showConfirmation = false;

    downloadAnchor = null;
    downloadObjectUrl = null;