Hide and Show angular 4 component depending on route
Hi there Im not sure if this is possible... basically I want to be able to show a component but only if the route matches and hide a component if the route matches Ive tried this app-header-home shows when the route is '/'which is good but app-header doesnt show at all even when the route inst '/' how can I fix this?
app.component.html
<app-header *ngIf="router.url == '/'"><app-header>
<app-header-home *ngIf="router.url != '/'"></app-header-home> //component I want hidden unless url '/'
<router-outlet></router-outlet>
<app-footer></app-footer>
app.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app';
constructor(
private router: Router
) {
}
}
Thanks
javascript
angular typescript asked Dec 8 '17 at 3:22
Smokey DawsonSmokey Dawson
1,98311747
add a comment |
Hi there Im not sure if this is possible... basically I want to be able to show a component but only if the route matches and hide a component if the route matches Ive tried this app-header-home shows when the route is '/'which is good but app-header doesnt show at all even when the route inst '/' how can I fix this?
app.component.html
<app-header *ngIf="router.url == '/'"><app-header>
<app-header-home *ngIf="router.url != '/'"></app-header-home> //component I want hidden unless url '/'
<router-outlet></router-outlet>
<app-footer></app-footer>
app.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app';
constructor(
private router: Router
) {
}
}
Thanks
javascript
angular typescript asked Dec 8 '17 at 3:22
Smokey DawsonSmokey Dawson
1,98311747
add a comment |
Hi there Im not sure if this is possible... basically I want to be able to show a component but only if the route matches and hide a component if the route matches Ive tried this app-header-home shows when the route is '/'which is good but app-header doesnt show at all even when the route inst '/' how can I fix this?
app.component.html
<app-header *ngIf="router.url == '/'"><app-header>
<app-header-home *ngIf="router.url != '/'"></app-header-home> //component I want hidden unless url '/'
<router-outlet></router-outlet>
<app-footer></app-footer>
app.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app';
constructor(
private router: Router
) {
}
}
Thanks
javascript
angular typescript asked Dec 8 '17 at 3:22
Smokey DawsonSmokey Dawson
1,98311747
Hi there Im not sure if this is possible... basically I want to be able to show a component but only if the route matches and hide a component if the route matches Ive tried this app-header-home shows when the route is '/'which is good but app-header doesnt show at all even when the route inst '/' how can I fix this?
app.component.html
<app-header *ngIf="router.url == '/'"><app-header>
<app-header-home *ngIf="router.url != '/'"></app-header-home> //component I want hidden unless url '/'
<router-outlet></router-outlet>
<app-footer></app-footer>
app.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app';
constructor(
private router: Router
) {
}
}
Thanks
javascript
angular typescript javascript
angular typescript asked Dec 8 '17 at 3:22
Smokey DawsonSmokey Dawson
1,98311747
asked Dec 8 '17 at 3:22
Smokey DawsonSmokey Dawson
1,98311747
edited Dec 8 '17 at 3:52
Smokey Dawson
asked Dec 8 '17 at 3:22
Smokey DawsonSmokey Dawson
1,98311747
asked Dec 8 '17 at 3:22
Smokey DawsonSmokey Dawson
1,98311747
asked Dec 8 '17 at 3:22
Smokey DawsonSmokey Dawson
1,98311747
1,98311747
add a comment |
add a comment |
4 Answers
4
active
oldest
votes
check the router.url in the template:
<app-header><app-header>
<app-header-home *ngIf="router != '/ur_route'"></app-header-home> //component I want hidden unless url /home
<router-outlet></router-outlet>
<app-footer></app-footer>
in app.component.ts inject the router.
export class AppComponent {
title = 'app';
router: string;
constructor(private _router: Router){
this.router = _router.url;
}
}
answered Dec 8 '17 at 3:36
Sachila RanawakaSachila Ranawaka
20.1k42651
Hey Ive tried what you said and It doesnt seem to be working?
– Smokey Dawson
Dec 8 '17 at 3:41
any errors in the console
– Sachila Ranawaka
Dec 8 '17 at 3:43
no errors in the console ive updated my question with the new code
– Smokey Dawson
Dec 8 '17 at 3:44
check the updated answer.
– Sachila Ranawaka
Dec 8 '17 at 3:44
Im getting this error[ts] Property 'router' does not exist on type 'AppComponent' did you mean '_router'?
– Smokey Dawson
Dec 8 '17 at 3:46
|
show 4 more comments
The accepted answer didn't work, because i think the variable will be assigned only once, then when we navigate, that variable will not be updated (component already initialized).
here's how I did it.. We inject the router in the component we want to hide :
constructor(private _router: Router){}
then in our template :
<div *ngIf="_router.url != '/login'">
... your component html ...
</div>
answered Nov 28 '18 at 23:07
Chtiwi MalekChtiwi Malek
6,96314953
I get this build error: Property 'router' is private and only accessible within class
– Harsimer
Mar 26 at 17:24
add a comment |
Below code worked for me.
I am hiding side navigation in login screen.
<div *ngIf="!router.url.includes('login')" class="sidenav">
answered Mar 14 at 9:41
SUNIL JADHAVSUNIL JADHAV
567
add a comment |
Take a look at this Angular Rounting guide.
You'll need a method called canActivate, this mehtod return a boolean and its in a service.
This I what works form me:
{path : 'getIn', component: GetinComponent , canActivate: [GetInService] }
answered Apr 23 '18 at 7:00
Boris DetryBoris Detry
657
This answer does not seem relevant to the question asked. He wants to hide components based on route. Not block access to route.
– perry
Nov 12 '18 at 4:32
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f47707225%2fhide-and-show-angular-4-component-depending-on-route%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
check the router.url in the template:
<app-header><app-header>
<app-header-home *ngIf="router != '/ur_route'"></app-header-home> //component I want hidden unless url /home
<router-outlet></router-outlet>
<app-footer></app-footer>
in app.component.ts inject the router.
export class AppComponent {
title = 'app';
router: string;
constructor(private _router: Router){
this.router = _router.url;
}
}
answered Dec 8 '17 at 3:36
Sachila RanawakaSachila Ranawaka
20.1k42651
Hey Ive tried what you said and It doesnt seem to be working?
– Smokey Dawson
Dec 8 '17 at 3:41
any errors in the console
– Sachila Ranawaka
Dec 8 '17 at 3:43
no errors in the console ive updated my question with the new code
– Smokey Dawson
Dec 8 '17 at 3:44
check the updated answer.
– Sachila Ranawaka
Dec 8 '17 at 3:44
Im getting this error[ts] Property 'router' does not exist on type 'AppComponent' did you mean '_router'?
– Smokey Dawson
Dec 8 '17 at 3:46
|
show 4 more comments
check the router.url in the template:
<app-header><app-header>
<app-header-home *ngIf="router != '/ur_route'"></app-header-home> //component I want hidden unless url /home
<router-outlet></router-outlet>
<app-footer></app-footer>
in app.component.ts inject the router.
export class AppComponent {
title = 'app';
router: string;
constructor(private _router: Router){
this.router = _router.url;
}
}
answered Dec 8 '17 at 3:36
Sachila RanawakaSachila Ranawaka
20.1k42651
Hey Ive tried what you said and It doesnt seem to be working?
– Smokey Dawson
Dec 8 '17 at 3:41
any errors in the console
– Sachila Ranawaka
Dec 8 '17 at 3:43
no errors in the console ive updated my question with the new code
– Smokey Dawson
Dec 8 '17 at 3:44
check the updated answer.
– Sachila Ranawaka
Dec 8 '17 at 3:44
Im getting this error[ts] Property 'router' does not exist on type 'AppComponent' did you mean '_router'?
– Smokey Dawson
Dec 8 '17 at 3:46
|
show 4 more comments
check the router.url in the template:
<app-header><app-header>
<app-header-home *ngIf="router != '/ur_route'"></app-header-home> //component I want hidden unless url /home
<router-outlet></router-outlet>
<app-footer></app-footer>
in app.component.ts inject the router.
export class AppComponent {
title = 'app';
router: string;
constructor(private _router: Router){
this.router = _router.url;
}
}
answered Dec 8 '17 at 3:36
Sachila RanawakaSachila Ranawaka
20.1k42651
check the router.url in the template:
<app-header><app-header>
<app-header-home *ngIf="router != '/ur_route'"></app-header-home> //component I want hidden unless url /home
<router-outlet></router-outlet>
<app-footer></app-footer>
in app.component.ts inject the router.
export class AppComponent {
title = 'app';
router: string;
constructor(private _router: Router){
this.router = _router.url;
}
}
answered Dec 8 '17 at 3:36
Sachila RanawakaSachila Ranawaka
20.1k42651
edited Dec 8 '17 at 3:49
answered Dec 8 '17 at 3:36
Sachila RanawakaSachila Ranawaka
20.1k42651
answered Dec 8 '17 at 3:36
Sachila RanawakaSachila Ranawaka
20.1k42651
answered Dec 8 '17 at 3:36
Sachila RanawakaSachila Ranawaka
20.1k42651
20.1k42651
Hey Ive tried what you said and It doesnt seem to be working?
– Smokey Dawson
Dec 8 '17 at 3:41
any errors in the console
– Sachila Ranawaka
Dec 8 '17 at 3:43
no errors in the console ive updated my question with the new code
– Smokey Dawson
Dec 8 '17 at 3:44
check the updated answer.
– Sachila Ranawaka
Dec 8 '17 at 3:44
Im getting this error[ts] Property 'router' does not exist on type 'AppComponent' did you mean '_router'?
– Smokey Dawson
Dec 8 '17 at 3:46
|
show 4 more comments
Hey Ive tried what you said and It doesnt seem to be working?
– Smokey Dawson
Dec 8 '17 at 3:41
any errors in the console
– Sachila Ranawaka
Dec 8 '17 at 3:43
no errors in the console ive updated my question with the new code
– Smokey Dawson
Dec 8 '17 at 3:44
check the updated answer.
– Sachila Ranawaka
Dec 8 '17 at 3:44
Im getting this error[ts] Property 'router' does not exist on type 'AppComponent' did you mean '_router'?
– Smokey Dawson
Dec 8 '17 at 3:46
Hey Ive tried what you said and It doesnt seem to be working?
– Smokey Dawson
Dec 8 '17 at 3:41
Hey Ive tried what you said and It doesnt seem to be working?
– Smokey Dawson
Dec 8 '17 at 3:41
any errors in the console
– Sachila Ranawaka
Dec 8 '17 at 3:43
any errors in the console
– Sachila Ranawaka
Dec 8 '17 at 3:43
no errors in the console ive updated my question with the new code
– Smokey Dawson
Dec 8 '17 at 3:44
no errors in the console ive updated my question with the new code
– Smokey Dawson
Dec 8 '17 at 3:44
check the updated answer.
– Sachila Ranawaka
Dec 8 '17 at 3:44
check the updated answer.
– Sachila Ranawaka
Dec 8 '17 at 3:44
Im getting this error
[ts] Property 'router' does not exist on type 'AppComponent' did you mean '_router'?– Smokey Dawson
Dec 8 '17 at 3:46
Im getting this error
[ts] Property 'router' does not exist on type 'AppComponent' did you mean '_router'?– Smokey Dawson
Dec 8 '17 at 3:46
|
show 4 more comments
The accepted answer didn't work, because i think the variable will be assigned only once, then when we navigate, that variable will not be updated (component already initialized).
here's how I did it.. We inject the router in the component we want to hide :
constructor(private _router: Router){}
then in our template :
<div *ngIf="_router.url != '/login'">
... your component html ...
</div>
answered Nov 28 '18 at 23:07
Chtiwi MalekChtiwi Malek
6,96314953
I get this build error: Property 'router' is private and only accessible within class
– Harsimer
Mar 26 at 17:24
add a comment |
The accepted answer didn't work, because i think the variable will be assigned only once, then when we navigate, that variable will not be updated (component already initialized).
here's how I did it.. We inject the router in the component we want to hide :
constructor(private _router: Router){}
then in our template :
<div *ngIf="_router.url != '/login'">
... your component html ...
</div>
answered Nov 28 '18 at 23:07
Chtiwi MalekChtiwi Malek
6,96314953
I get this build error: Property 'router' is private and only accessible within class
– Harsimer
Mar 26 at 17:24
add a comment |
The accepted answer didn't work, because i think the variable will be assigned only once, then when we navigate, that variable will not be updated (component already initialized).
here's how I did it.. We inject the router in the component we want to hide :
constructor(private _router: Router){}
then in our template :
<div *ngIf="_router.url != '/login'">
... your component html ...
</div>
answered Nov 28 '18 at 23:07
Chtiwi MalekChtiwi Malek
6,96314953
The accepted answer didn't work, because i think the variable will be assigned only once, then when we navigate, that variable will not be updated (component already initialized).
here's how I did it.. We inject the router in the component we want to hide :
constructor(private _router: Router){}
then in our template :
<div *ngIf="_router.url != '/login'">
... your component html ...
</div>
answered Nov 28 '18 at 23:07
Chtiwi MalekChtiwi Malek
6,96314953
edited Nov 29 '18 at 0:01
answered Nov 28 '18 at 23:07
Chtiwi MalekChtiwi Malek
6,96314953
answered Nov 28 '18 at 23:07
Chtiwi MalekChtiwi Malek
6,96314953
answered Nov 28 '18 at 23:07
Chtiwi MalekChtiwi Malek
6,96314953
6,96314953
I get this build error: Property 'router' is private and only accessible within class
– Harsimer
Mar 26 at 17:24
add a comment |
I get this build error: Property 'router' is private and only accessible within class
– Harsimer
Mar 26 at 17:24
I get this build error: Property 'router' is private and only accessible within class
– Harsimer
Mar 26 at 17:24
I get this build error: Property 'router' is private and only accessible within class
– Harsimer
Mar 26 at 17:24
add a comment |
Below code worked for me.
I am hiding side navigation in login screen.
<div *ngIf="!router.url.includes('login')" class="sidenav">
answered Mar 14 at 9:41
SUNIL JADHAVSUNIL JADHAV
567
add a comment |
Below code worked for me.
I am hiding side navigation in login screen.
<div *ngIf="!router.url.includes('login')" class="sidenav">
answered Mar 14 at 9:41
SUNIL JADHAVSUNIL JADHAV
567
add a comment |
Below code worked for me.
I am hiding side navigation in login screen.
<div *ngIf="!router.url.includes('login')" class="sidenav">
answered Mar 14 at 9:41
SUNIL JADHAVSUNIL JADHAV
567
Below code worked for me.
I am hiding side navigation in login screen.
<div *ngIf="!router.url.includes('login')" class="sidenav">
answered Mar 14 at 9:41
SUNIL JADHAVSUNIL JADHAV
567
answered Mar 14 at 9:41
SUNIL JADHAVSUNIL JADHAV
567
answered Mar 14 at 9:41
SUNIL JADHAVSUNIL JADHAV
567
answered Mar 14 at 9:41
SUNIL JADHAVSUNIL JADHAV
567
567
add a comment |
add a comment |
Take a look at this Angular Rounting guide.
You'll need a method called canActivate, this mehtod return a boolean and its in a service.
This I what works form me:
{path : 'getIn', component: GetinComponent , canActivate: [GetInService] }
answered Apr 23 '18 at 7:00
Boris DetryBoris Detry
657
This answer does not seem relevant to the question asked. He wants to hide components based on route. Not block access to route.
– perry
Nov 12 '18 at 4:32
add a comment |
Take a look at this Angular Rounting guide.
You'll need a method called canActivate, this mehtod return a boolean and its in a service.
This I what works form me:
{path : 'getIn', component: GetinComponent , canActivate: [GetInService] }
answered Apr 23 '18 at 7:00
Boris DetryBoris Detry
657
This answer does not seem relevant to the question asked. He wants to hide components based on route. Not block access to route.
– perry
Nov 12 '18 at 4:32
add a comment |
Take a look at this Angular Rounting guide.
You'll need a method called canActivate, this mehtod return a boolean and its in a service.
This I what works form me:
{path : 'getIn', component: GetinComponent , canActivate: [GetInService] }
answered Apr 23 '18 at 7:00
Boris DetryBoris Detry
657
Take a look at this Angular Rounting guide.
You'll need a method called canActivate, this mehtod return a boolean and its in a service.
This I what works form me:
{path : 'getIn', component: GetinComponent , canActivate: [GetInService] }
answered Apr 23 '18 at 7:00
Boris DetryBoris Detry
657
answered Apr 23 '18 at 7:00
Boris DetryBoris Detry
657
answered Apr 23 '18 at 7:00
Boris DetryBoris Detry
657
answered Apr 23 '18 at 7:00
Boris DetryBoris Detry
657
657
This answer does not seem relevant to the question asked. He wants to hide components based on route. Not block access to route.
– perry
Nov 12 '18 at 4:32
add a comment |
This answer does not seem relevant to the question asked. He wants to hide components based on route. Not block access to route.
– perry
Nov 12 '18 at 4:32
This answer does not seem relevant to the question asked. He wants to hide components based on route. Not block access to route.
– perry
Nov 12 '18 at 4:32
This answer does not seem relevant to the question asked. He wants to hide components based on route. Not block access to route.
– perry
Nov 12 '18 at 4:32
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f47707225%2fhide-and-show-angular-4-component-depending-on-route%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
