TypeScript

by Vasilis Tsoulis

HTML

<mat-list-item><a #elp1 [routerLink]="['/']" fragment="intro-text"> Welcome </a></mat-list-item>

TypeScript

import { Component, OnInit, Input, OnDestroy, HostListener, ViewChild } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import { trigger,style,transition,animate,keyframes,query,stagger,state } from '@angular/animations';
import { Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';


@Component({
  selector: 'app-home-gr',
  templateUrl: './home-gr.component.html',
  styleUrls: ['./home-gr.component.scss', "../../../node_modules/font-awesome/css/font-awesome.css"],
  host: {
        '(window:scroll)': 'updateHeader($event)'
    }
})
export class HomeGrComponent implements OnInit {
	isScrolled = false;
	currPos: Number = 0;
	startPos: Number = 0;
	changePos: Number = 100;
	// slideIndex: Number = 0;
  private sub: Subscription;
  private fragment: String;
  
  // private element: String;
private carouselTimeoutVar : any;
screenWidth: number;
@ViewChild('elp1') link;
@HostListener('window:resize', ['$event'])
    onResize(event?) {      
      this.screenWidth = window.innerWidth;
      
      if(this.screenWidth < 1080){
      	this.link.nativeElement.innerHTML = "New";
      	
      }else if(this.screenWidth >= 1080){
      	this.link.nativeElement.innerHTML = "Welcome";    	
      }else{
      	console.log('problem');
      }
	}

  constructor(private route: ActivatedRoute) {
  	this.sub = route.fragment.pipe(filter(f => !!f)).subscribe(f => document.getElementById(f).scrollIntoView() );
  	this.onResize();

  }
  }