@angular/core#Component TypeScript Examples

@Component({
  selector: 'app-property-card',
  templateUrl: './property-card.component.html',
  styleUrls: ['./property-card.component.scss']
})
export class PropertyCardComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

@Component({
  selector: 'app-how-it-works',
  templateUrl: './how-it-works.component.html',
  styleUrls: ['./how-it-works.component.scss']
})
export class HowItWorksComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

@Component({
    selector: 'app-leverage',
    templateUrl: './leverage.component.html',
    styleUrls: ['./leverage.component.scss']
})
export class LeverageComponent {
    constructor() {

    }
}

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {

  showSplash = true;

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
  ) {
    this.initializeApp();
  }
  
  initializeApp() {
    this.platform.ready().then(() => {
      Environment.setEnv({      
        'API_KEY_FOR_BROWSER_RELEASE': 'AIzaSyBfdfHVfFgZbqw40ZBzZZa7kMTrEOvxarg',
        'API_KEY_FOR_BROWSER_DEBUG': 'AIzaSyBfdfHVfFgZbqw40ZBzZZa7kMTrEOvxarg'
      });
      this.statusBar.overlaysWebView(false);
      this.statusBar.styleLightContent();
      setTimeout(() => {
        this.splashScreen.hide();
      }, 300);
      timer(3000).subscribe(() => this.showSplash = false)
    });
  }
}

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

  base64: any;
  imageChangedEvent: any;
  imageUrl: any;

  fileChangeEvent(event: any) {
    this.imageChangedEvent = event;
  }


  imageCropped(event: CroppedEvent) {
    console.log(event);
    this.base64 = event.base64;
  }

  gotoGithub() {
    window.open('https://github.com/AhamedBilal/ngx-photo-editor');
  }

  // gotoNPM() {
  //   window.open('https://www.npmjs.com/package/ngx-photo-editor');
  // }
}

@Component({
  selector: 'app-nav-menu',
  templateUrl: './nav-menu.component.html',
  styleUrls: ['./nav-menu.component.scss']
})
export class NavMenuComponent {
  isExpanded = false;

  collapse() {
    this.isExpanded = false;
  }

  toggle() {
    this.isExpanded = !this.isExpanded;
  }
}

@Component({
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

@Component({
  template: `
    <mat-paginator appPagination
                   [pageIndex]="pageIndex"
                   [pageSize]="pageSize"
                   [pageSizeOptions]="pageSizeOptions"
                   [hidePageSize]="hidePageSize"
                   [showFirstLastButtons]="showFirstLastButtons"
                   [length]="length"
                   [color]="color"
                   [disabled]="disabled"
                   (page)="pageEvent($event)">
    </mat-paginator>
  `,
})

// tslint:disable-next-line: component-class-suffix
class MatPaginatorApp {
  pageIndex = 0;
  pageSize = 10;
  pageSizeOptions = [5, 10, 25, 100];
  hidePageSize = false;
  showFirstLastButtons = false;
  length = 100;
  disabled: boolean;
  pageEvent = jasmine.createSpy('Page Event');
  color: ThemePalette;
  @ViewChild(MatPaginator) paginator: MatPaginator;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  title = 'BlueXolo';
  color = '#546e7a';
  spa: Boolean = false;

  constructor(private router: Router){}

  goHome(): void {
    this.spa = false;
    window.location.replace('#home');
  }

  goInformation() {
    this.spa = false;
    window.location.replace('#information');
  }

  goFooter() {
      this.spa = false;
      window.location.replace('#footer');
  }

  goDocumentation() {
    this.spa = true;
    this.router.navigate(['/documentation']);
  }
}

@Component({
  selector: 'progress-bar',
  templateUrl: './progress-bar.component.html',
  styleUrls: ['./progress-bar.component.css'],
})
export class ProgressBarComponent {
  @Input() progress?: number;
  @Input() total?: number;
  @Input() color = 'blue';

  constructor() {
    //if we don't have progress, set it to 0.
    if (!this.progress) {
    }
    //if we don't have a total aka no requirement, it's 100%.
    if (this.total === 0) {
      this.total = this.progress;
    } else if (!this.total) {
      this.total = 100;
    }
    //if the progress is greater than the total, it's also 100%.
    if (this.progress && this.total) {
      if (this.progress > this.total) {
        this.progress = 100;
        this.total = 100;
      }
      this.progress = (this.progress / this.total) * 100;
    }
  }
}

@Component({
  selector: 'bdc-example1',
  templateUrl: './example1.component.html',
  styleUrls: ['./example1.component.scss']
})
export class Example1Component implements OnInit {

  constructor(private bdcWalkService: BdcWalkService) {
  }

  ngOnInit() {
  }

  reset() {
    this.bdcWalkService.reset('example1');
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  title = 'Smersh';
  @HostBinding('class') className = Theme.LIGHT_THEME;
  protected logged: boolean;

  constructor(
    private http: HttpClient,
    private router: Router,
    private dialog: MatDialog,
    private themeService: ThemeService
  ) {}

  ngOnInit(): void {
    this.themeService.onChangeTheme.subscribe(
      (theme) => (this.className = theme)
    );

    // check if valid jwt
    if (Date.now() < new DecodedToken().getDecoded().exp * 1000) {
      this.logged = true;
    } else {
      new Token().reset();
      this.router.navigateByUrl('/login');
    }
  }
}

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.scss'],
})
export class AboutComponent implements OnInit {
  @Output() onAboutClosed = new EventEmitter<void>();

  ngOnInit(): void {
    // Empty
  }

  closeAbout(): void {
    this.onAboutClosed.emit();
  }
}

@Component({
  selector: 'app-image-search',
  templateUrl: './image-search.component.html',
  styleUrls: ['./image-search.component.css']
})
export class ImageSearchComponent implements OnInit {
  searchTerm = '';
  loading = false;
  images: string[] = [];

  constructor(private imageAPIService: ImageApiService) { }

  ngOnInit(): void {}

  formSubmitted() {
    this.images = [];
    this.loading = true;
    this.imageAPIService.getImages(this.searchTerm)
      .subscribe((images: string[]) => {
        this.images = images;
        this.loading = false;   
      });
  }

}

@Component({
  selector: 'app-mobile-menu',
  templateUrl: './mobile-menu.component.html',
  styleUrls: ['./mobile-menu.component.scss']
})
export class MobileMenuComponent implements OnInit {
  advanceMode$ = this.settingsQuery.advanceMode$;

  constructor(
    private readonly nzDrawerRef: NzDrawerRef,
    private readonly settingsQuery: SettingsQuery,
  ) { }

  ngOnInit(): void {
  }

  closeDrawer(): void {
    this.nzDrawerRef.close();
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'One Platform | Lighthouse';
}

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

    constructor(
        protected web3Service: Web3Service,
        protected configurationService: ConfigurationService,
        protected themeService: ThemeService,
        protected swUpdate: SwUpdate,
        protected appRef: ApplicationRef,
        @Inject(DOCUMENT) private document: Document
    ) {

    }

    ngOnInit() {

        if (
            (
                navigator.userAgent.toLowerCase().indexOf('android') === -1 ||
                (document.fullscreenElement || document.fullscreenElement === null)
            ) &&
            'serviceWorker' in navigator && environment.production
        ) {

            this.swUpdate.available.subscribe(event => {

                console.log('current version is', event.current);
                console.log('available version is', event.available);

                this.swUpdate.activateUpdate().then(() => document.location.reload());
            });

            this.swUpdate.activated.subscribe(event => {
                console.log('old version was', event.previous);
                console.log('new version is', event.current);
            });
        }

        this.checkForUpdates();
    }

    @HostListener('window:focus', ['$event'])
    onFocus(event: FocusEvent): void {

        this.checkForUpdates();
    }

    async checkForUpdates() {

        if (
            (
                navigator.userAgent.toLowerCase().indexOf('android') === -1 ||
                (document.fullscreenElement || document.fullscreenElement === null)
            ) &&
            'serviceWorker' in navigator && environment.production
        ) {

            this.swUpdate.checkForUpdate();
        }
    }
}

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

    constructor(
        protected web3Service: Web3Service,
        protected configurationService: ConfigurationService,
        protected themeService: ThemeService,
        protected swUpdate: SwUpdate,
        protected appRef: ApplicationRef,
        private deviceDetectorService: DeviceDetectorService,
        @Inject(DOCUMENT) private document: Document
    ) {

    }

    ngOnInit() {

        if (this.deviceDetectorService.isDesktop()) {
            this.document.body.classList.add('twitter-scroll');
        }

        if (
            (
                navigator.userAgent.toLowerCase().indexOf('android') === -1 ||
                (document.fullscreenElement || document.fullscreenElement === null)
            ) &&
            'serviceWorker' in navigator && environment.production
        ) {

            this.swUpdate.available.subscribe(event => {

                console.log('current version is', event.current);
                console.log('available version is', event.available);

                this.swUpdate.activateUpdate().then(() => document.location.reload());
            });

            this.swUpdate.activated.subscribe(event => {
                console.log('old version was', event.previous);
                console.log('new version is', event.current);
            });
        }

        this.checkForUpdates();
    }

    @HostListener('window:focus', ['$event'])
    onFocus(event: FocusEvent): void {

        this.checkForUpdates();
    }

    async checkForUpdates() {

        if (
            (
                navigator.userAgent.toLowerCase().indexOf('android') === -1 ||
                (document.fullscreenElement || document.fullscreenElement === null)
            ) &&
            'serviceWorker' in navigator && environment.production
        ) {

            this.swUpdate.checkForUpdate();
        }
    }
}