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

import { Component } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';
import { authCodeFlowConfig } from 'projects/sample/src/app/auth-code-flow.config';
import { filter } from 'rxjs/operators';
import { JwksValidationHandler } from 'angular-oauth2-oidc-jwks';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Quickstart Demo';

  constructor(private oauthService: OAuthService) {
    this.oauthService.configure(authCodeFlowConfig);
    this.oauthService.loadDiscoveryDocumentAndLogin();

    // Automatically load user profile
    this.oauthService
        .events
        .pipe(filter(e => e.type === 'token_received'))
        .subscribe(_ => this.oauthService.loadUserProfile());

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { IntroPage } from '../pages/intro/intro';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = IntroPage;

  pages: Array<{title: string, component: any}>;

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Home', component: HomePage },
      { title: 'List', component: ListPage }

list: [
        'Open a modal with component',
        'Pass your data',
        'Do something else',
        '...'
      ],
      title: 'Modal with component'
    };
    this.bsModalRef = this.modalService.show(ModalContentComponent, {initialState});
    this.bsModalRef.content.closeBtnName = 'Close';
  }
}

/* This is a component which we pass in modal*/

@Component({
  selector: 'modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title pull-left">{{title}}</h4>
      <button aria-label="Close" class="close pull-right" type="button">
        <span aria-hidden="true">×</span>
      </button>
    </div>
    <div class="modal-body">
      <ul>
        <li>{{item}}</li>
      </ul>
    </div>
    <div class="modal-footer">
      <button class="btn btn-default" type="button">{{closeBtnName}}</button>
    </div>

import {Component} from '@angular/core';
import {MdProgressBar} from '@angular2-material/progress-bar';

@Component({
  moduleId: module.id,
  selector: 'progress-bar-basic-usage',
  templateUrl: 'progress-bar-basic-usage.component.html',
  styleUrls: ['progress-bar-basic-usage.component.css'],
  directives: [MdProgressBar]
})
export class ProgressBarBasicUsageComponent {
  public determinateValue: number = 30;
  public determinateValue2: number = 30;

  constructor() {
    // Iterate every 100ms, non-stop
    setInterval(() => {
      this.determinateValue += 1;
      this.determinateValue2 += 1.5;

import { Component, OnInit, Input } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ServiceTypeX } from '../../accessories.component';

import { LightbulbManageComponent } from './lightbulb.manage.component';

@Component({
  selector: 'app-lightbulb',
  templateUrl: './lightbulb.component.html',
  styleUrls: ['./lightbulb.component.scss'],
})
export class LightbulbComponent implements OnInit {
  @Input() public service: ServiceTypeX;

  constructor(
    private modalService: NgbModal,
  ) { }

  ngOnInit() {}

  onClick() {
    this.service.getCharacteristic('On').setValue(!this.service.values.On);

import { Component, Input, OnInit } from '@angular/core';
import { List } from '../model/list';
import { ListTag } from '../model/list-tag.enum';
import { NzModalRef } from 'ng-zorro-antd';
import { ListsFacade } from '../+state/lists.facade';
import { Observable } from 'rxjs';
import { filter, map } from 'rxjs/operators';

@Component({
  selector: 'app-tags-popup',
  templateUrl: './tags-popup.component.html',
  styleUrls: ['./tags-popup.component.less']
})
export class TagsPopupComponent implements OnInit {

  @Input()
  list: Partial;

  public list$: Observable;

  tags: any[] = [];

  constructor(private modalRef: NzModalRef, private listsFacade: ListsFacade) {
  }

import { Component } from '@angular/core';

@Component({
  selector: 'demo-datepicker-disabled',
  templateUrl: './disabled.component.html'
})
export class DemoDatepickerDisabledComponent {
  isDisabled = false;

  toggleDisabling(): void {
    this.isDisabled = !this.isDisabled;
  }
}

import { Component, OnInit, ViewContainerRef, ViewChild, Directive, ElementRef, HostBinding, HostListener,EventEmitter, Output } from '@angular/core';
import { Router } from '@angular/router';
import { I18NService, MsgBoxService, Utils ,Consts} from 'app/shared/api';
import { FormControl, FormGroup, FormBuilder, Validators, ValidatorFn, AbstractControl } from '@angular/forms';
import { AppService } from 'app/app.service';
import { I18nPluralPipe } from '@angular/common';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { MenuItem ,ConfirmationService} from '../../components/common/api';
import { identifierModuleUrl } from '@angular/compiler';
import { MigrationService } from './migration.service';
import { BucketService } from './../block/buckets.service';
import { Http, Headers } from '@angular/http';
import { ReactiveFormsModule, FormsModule} from '@angular/forms';
declare let X2JS:any;

@Component({
    selector: 'migration-list',
    templateUrl: 'migration.html',
    providers: [ConfirmationService, MsgBoxService],
    styleUrls: [],
    animations: []
})
export class MigrationListComponent implements OnInit {
    allMigrations = [];
    selectedMigrations = [];
    createMigrateShow = false;
    createMigrationForm:FormGroup;
    dataAnalysis = [];
    excute = true;
    showAnalysis = false;
    deleteSrcObject = [];
    selectTime = true;

import { Component, OnInit, OnDestroy, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import { Validators, FormGroup, FormControl } from '@angular/forms';
import * as _ from 'lodash';
import { UserService, OtpService } from '@sunbird/core';
import { ResourceService, ServerResponse, ToasterService } from '@sunbird/shared';
import { Subject } from 'rxjs';
import { ProfileService } from './../../services';
import { IInteractEventObject, IInteractEventEdata } from '@sunbird/telemetry';

@Component({
  selector: 'app-update-contact-details',
  templateUrl: './update-contact-details.component.html',
  styleUrls: ['./update-contact-details.component.scss']
})
export class UpdateContactDetailsComponent implements OnInit, OnDestroy {
  public unsubscribe = new Subject();
  @Input() contactType: string;
  @Output() close = new EventEmitter();
  contactTypeForm: FormGroup;
  enableSubmitBtn = false;
  showUniqueError = '';
  showForm = true;
  @ViewChild('contactTypeModal') contactTypeModal;
  otpData: any;
  submitInteractEdata: IInteractEventEdata;
  telemetryInteractObject: IInteractEventObject;

import { Component, Input, OnInit, Output, EventEmitter, TemplateRef } from '@angular/core'

@Component({
  selector: 'ui-data-grid',
  templateUrl: './data-grid.component.html',
})
export class UiDataGridComponent implements OnInit {
  @Input() limit = 20

  @Input() config: any = {}

  @Input() service: any
  @Output() action = new EventEmitter()

  public items: any[]

  public totalItems
  public currentPage: any = 1