@angular/core#OnInit TypeScript Examples

@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-property-card',
  templateUrl: './property-card.component.html',
  styleUrls: ['./property-card.component.scss']
})
export class PropertyCardComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

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

    @Input() message = '';

    constructor() {
    }

    ngOnInit() {
    }

}

@Component({
  selector: 'app-slides',
  templateUrl: './slides.component.html',
  styleUrls: ['./slides.component.scss'],
})
export class SlidesComponent implements OnInit {
  slideOpts = {
    initialSlide: 0,
    speed: 400
  };

  constructor() { }

  ngOnInit() {}

}

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

  constructor() { }

  ngOnInit(): void {
  }

}

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

  title: string = "Contact";

  constructor() { }

  ngOnInit() {
  }

}

@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-current-language',
  templateUrl: './current-language.component.html',
  styleUrls: ['./current-language.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [TuiDestroyService]
})
export class CurrentLanguageComponent implements OnInit {
  public currentLanguage: LanguageListElement;

  constructor(
    private readonly translateService: TranslateService,
    private readonly destroy$: TuiDestroyService,
    private readonly cdr: ChangeDetectorRef
  ) {
    this.currentLanguage = this.getCurrentLanguage(this.translateService.currentLang);
  }

  public ngOnInit(): void {
    this.translateService.onLangChange.pipe(takeUntil(this.destroy$)).subscribe(currentLang => {
      this.currentLanguage = this.getCurrentLanguage(currentLang.lang);
      this.cdr.detectChanges();
    });
  }

  /**
   * Gets current language.
   * @param CurrentLang code of current language.
   */
  private getCurrentLanguage(currentLang: string): LanguageListElement {
    return LANGUAGES_LIST.find(lang => lang.lng === currentLang);
  }
}

@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();
        }
    }
}

@Component({
  selector: 'app-service-filter',
  templateUrl: './service-filter.page.html',
  styleUrls: ['./service-filter.page.scss'],
})
export class ServiceFilterPage implements OnInit {
  
  public val: string = "default";
  public filter: string;
  public origin: string;

  constructor(
    public modalCtrl: ModalController,
    public router: Router,
    public firestore: AngularFirestore,
    public activatedRoute: ActivatedRoute,
    public navParams: NavParams,
  ) { 
  }


  ngOnInit() {
    this.val = this.navParams.data.value;
    this.origin = this.navParams.data.value;
    console.log(this.val)
  }
  
  select(event) {
    this.val = event.target.value;
    console.log('aaa',this.val)
    // console.log(this.val)
  }

  // modal jump

  applyDismiss() {
    this.modalCtrl.dismiss(this.val)
  }

  resetDismiss() {
    this.modalCtrl.dismiss("default")
  }

  cancelDismiss() {
    this.modalCtrl.dismiss(this.origin)
  }
}

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

  loading = false;
  imageFile: any;
  imagePreview: any;
  imageData = new FormData();
  availableLanguage: AvailableLanguage[] = [];
  DetectedTextLanguage: string = '';
  ocrResult: OcrResult;
  DefaultStatus: string;
  status: string;
  maxFileSize: number;
  isValidFile = true;

  constructor(private computervisionService: ComputervisionService) {
    this.DefaultStatus = "Maximum size allowed for the image is 4 MB";
    this.status = this.DefaultStatus;
    this.maxFileSize = 4 * 1024 * 1024; // 4MB
    this.ocrResult = new OcrResult();
  }

  ngOnInit() {
    this.computervisionService.getAvailableLanguage()
      .subscribe((result: AvailableLanguage[]) =>
        this.availableLanguage = result
      );
  }

  uploadImage(event: any) {
    this.imageFile = event.target.files[0];
    if (this.imageFile.size > this.maxFileSize) {
      this.status = `The file size is ${this.imageFile.size} bytes, this is more than the allowed limit of ${this.maxFileSize} bytes.`;
      this.isValidFile = false;
    } else if (this.imageFile.type.indexOf('image') == -1) {
      this.status = "Please upload a valid image file";
      this.isValidFile = false;
    } else {
      const reader = new FileReader();
      reader.readAsDataURL(event.target.files[0]);
      reader.onload = () => {
        this.imagePreview = reader.result;
      };
      this.status = this.DefaultStatus;
      this.isValidFile = true;
    }
  }

  GetText() {
    if (this.isValidFile) {

      this.loading = true;
      this.imageData.append('imageFile', this.imageFile);

      this.computervisionService.getTextFromImage(this.imageData)
        .subscribe((result: OcrResult) => {
          this.ocrResult = result;

          const availableLanguageDetails = this.availableLanguage.find(x => x.languageID === this.ocrResult.language);

          if (availableLanguageDetails) {
            this.DetectedTextLanguage = availableLanguageDetails.languageName;
          } else {
            this.DetectedTextLanguage = "unknown";
          }
          this.loading = false;
        });
    }
  }
}

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

  items = [];
  constructor(private httpClient: HttpClient,
    private sanitizer: DomSanitizer) { }
  activeIndex = 0;

  ngOnInit(): void {
    this.defaultTab();
  }

  defaultTab() {
    if (this.items.length == 0) {

      this.httpClient.get("./assets/" + "default.json",
        { responseType: 'text' as 'json' }).subscribe(data => {
          this.items.push({ "id": "START", "text": data });
        })
    }
  }

  handleClose($event) {
    var new_array = [];
    var deleted = false;
    for (var index = 0; index < this.items.length; index++) {
      if (deleted || index != $event.index) {
        new_array.push(this.items[index]);
      } else {
        deleted = true;
      }
    }
    this.items = new_array;
    this.defaultTab();
  }
  transformYourHtml(htmlTextWithStyle) {
    return this.sanitizer.bypassSecurityTrustHtml(htmlTextWithStyle);
  }
}

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

export class AppComponent implements OnInit {
    BASE_URL = 'http://localhost:3000';
    // MatPaginator Inputs
    paginationInfo;
    pageSizeOptions: number[] = [5, 10, 25, 100];


    // Test states
    EmitResult = {
      pageNumber: '',
      pageSize: ''
    };

    testPaginator = {
      length: 1000,
      pageSize: 10,
      pageIndex: 1
    };


    // states
    tableData;
    constructor(private httpClient: HttpClient) {
      this.getPageDetails();
    }
    setPageSizeOptions = (setPageSizeOptionsInput: string) => {
      if (setPageSizeOptionsInput) {
        this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str);
      }
    }

    ngOnInit(): void {
      // Called after the constructor, initializing input properties, and the first call to ngOnChanges.
      // Add 'implements OnInit' to the class.
      this.getPageDetails();
     // this.getPageDetails();
    }

    onPageEvent = ($event) => {
      this.getData($event.pageIndex, $event.pageSize);
    }

    showTestEmit = ($event) => {
      this.EmitResult =  {
        pageNumber: $event.pageIndex,
        pageSize: $event.pageSize
      };
    }

    getPageDetails = () => {
      this.getPageSize().subscribe( res => {
        this.paginationInfo = res;
        this.getData(0, this.paginationInfo.pageSize);
      });
    }

    getData = (pg, lmt) => {
      return this.allProjects(pg, lmt).subscribe( res => {
        this.tableData = res;
      });
    }

    allProjects = (page, limit) => {
      return this.httpClient.get(`${this.BASE_URL}/posts?_page=${page + 1}&_limit=${limit}`);
    }

    getPageSize = () => {
      return this.httpClient.get(`${this.BASE_URL}/pageSize`);
    }
}

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

  sliderArray: object[];
  transform: number;
  selectedIndex: number = 0;

  constructor(private sliderService: SliderService) { 
    this.sliderArray = [];
    this.selectedIndex = 0;
    this.transform = 100;
  }

  tooltipsList=["Main page","What is BlueXolo?","Main Characteristics","Main Advantages"]

  getToolTip(x){
    return this.tooltipsList[x]
  }

  ngOnInit() {
    this.sliderService.getDataSlides().subscribe(
      (slide: Slide) => this.sliderArray = slide.sliderArray
    );
  }

  selected(x) {
    this.downSelected(x);
    this.selectedIndex = x;
  }

  keySelected(x) {
    this.downSelected(x);
    this.selectedIndex = x;
  }

  downSelected(x) {
    this.transform = 100 - (x) * 45;
    this.selectedIndex = this.selectedIndex + 1;
    if(this.selectedIndex > 5) {
      this.selectedIndex = 0;
    }
  }

}

@Component({
  selector: 'bdc-walk-popup',
  templateUrl: './tutorial-popup.component.html',
  styleUrls: ['./tutorial-popup.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class BdcWalkPopupComponent implements OnInit, OnChanges {
  @Input() name: string;
  @Input() header: string;
  @Input() xPosition: MenuPositionX = 'before';
  @Input() yPosition: MenuPositionY = 'below';
  @Input() arrow = true;
  @Input() horizontal = false;
  @Input() closeOnClick = false;
  @Input() alignCenter: boolean | undefined; // by default only if size < 70 it will auto-align to center
  @Input() offsetX = 0;
  @Input() offsetY = 0;
  @Input() class = '';
  @Input() showCloseButton = true;
  @Input() showButton = false;
  @Input() buttonText = 'Got it';
  @Input() sideNoteText: string;
  @Input() mustCompleted: { [taskName: string]: any | boolean } = {};
  @Input() mustNotDisplaying: string[] = [];
  @Input() onCloseCompleteTask: { [taskName: string]: any | boolean } = {};
  @Input() onButtonCompleteTask: { [taskName: string]: any | boolean } = {};
  @Output() opened = new EventEmitter<void>();
  @Output() closed = new EventEmitter<void>();
  @HostBinding('attr.class') className = undefined;

  @ViewChild(MatMenu, { static: true }) menu: MatMenu;
  @ContentChild(TemplateRef) templateRef: TemplateRef<any>;

  trigger: BdcWalkTriggerDirective;
  data: any;

  constructor(private tutorialService: BdcWalkService) { }

  ngOnInit() {
  }

  ngOnChanges() {
    if (this.trigger) {
      this.trigger.reposition();
    }
  }

  _getClass() {
    return `bdc-walk-popup ${this.class} ` + (this.arrow ? ' arrow' : '') + (this.horizontal ? ' horizontal' : '');
  }

  getValue(taskName: string): any {
    return this.tutorialService.getTaskCompleted(taskName);
  }
}