Home > Mobile >  Angular show divs as per router links
Angular show divs as per router links

Time:10-29

I have a component which contains 2 divs and i want to show only one div for eg: Show only div 1 on page /contact Show only div 2 on page /profile and /about

filter.component.html

//div 1
<div>
 //some content
<div>

//div 2
<div>
 //some content
<div>

CodePudding user response:

ts file

showContect = false;
showProfile = false;
constructor(private router: Router ) {}
ngOninit() {
    if(this.router.url == '/profile' || this.router.url == '/about'){
        this.showContect = false;
        this.showProfile = true;
    }
    if(this.router.url == '/contact'){
        this.showContect = true;
        this.showProfile = false;
    }
}

html file

<div *ngIf="showProfile">A</div>
<div *ngIf="showContect">B</div>

CodePudding user response:

ts file

constructor(public router: Router ) { }

html file

<div *ngIf="router.url == '/profile' || router.url == '/about'">A</div>
<div *ngIf="router.url == '/contact'">B</div>
  • Related