Hey there Im trying to toggle a component on and off, but I cant seem to get it to work...
app.component.ts
import { Component } from '#angular/core';
import { Router } from '#angular/router';
import { NgIf } from '#angular/common';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app';
router: string;
constructor(private _router: Router)
{
this.router = _router.url;
}
}
app.component.html
<app-header></app-header>
<app-header-home *ngIf="router !== ''"></app-header-home>
<router-outlet></router-outlet>
<app-footer></app-footer>
route configuration
export const ROUTES: Routes = [
{ path: '', component: HomeComponent, pathMatch="full" },
{ path: 'who-we-are', component: WhoWeAreComponent},
{ path: 'our-technology', component: OurTechnologyComponent},
{ path: 'our-work', component: OurWorkComponent },
{ path: 'get-in-touch', component: GetInTouchComponent }
];
index.html
<base href="/">
so basically If I start at home I want the app-header-home component shown but then as soon as I navigate to a new section I want app-header-home to hide but then If I go back to home I want it to show up again
Thanks
You want to subscribe to route changes, and the change a boolean flag depending on route in your typescript:
import { Component, OnInit } from '#angular/core';
import { Router, Event, NavigationStart } from '#angular/router';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
routeHidden = true;
constructor(
private router: Router) { }
ngOnInit() {
this.router.events.subscribe( (e) => {
if (e instanceof NavigationStart) {
if (e.url === "/") {
this.routeHidden = false;
} else {
this.routeHidden = true;
}
}
})
}
}
and in your html template:
<app-header-home *ngIf="routeHidden"></app-header-home>
Try using the ActivatedRoute service
constructor(private route: ActivatedRoute){
this.router= route.snapshot.url.join('');
}
Related
I'm new to angular and wanted to build a translation app but getting this error. The code is as follows:
import { Component } from "#angular/core";
import { TranslateService } from "./translate.service";
#Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
text: string;
translatedText: string;
constructor(private translateService: TranslateService) {};
submit(){
this.translateService.translate(this.text).subscribe((result)=>{
this.translatedText = result;
})
}
}
Im having some trouble figuring this out, basically I have a headerTitleService which I want to be able to dynamically set the title in my header component but for some reason when I set the title nothing shows up? Im not getting any errors so I can seem to figure out what the problem is..
headerTitle.service.ts
import { Injectable } from '#angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
#Injectable()
export class HeaderTitleService {
title = new BehaviorSubject('');
constructor() { }
setTitle(title: string) {
this.title.next(title);
}
}
header.component.ts
import { Component, OnInit } from '#angular/core';
import { HeaderTitleService } from '../../../services/headerTitle.service'
#Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'],
providers: [HeaderTitleService]
})
export class HeaderComponent implements OnInit {
title: string;
constructor(
private headerTitleService: HeaderTitleService
) { }
ngOnInit() {
this.headerTitleService.title.subscribe(updatedTitle => {
this.title = updatedTitle;
});
}
}
header.component.html
<h1>{{title}}</h1>
home.component.ts
import { Component, OnInit } from '#angular/core';
import { HeaderTitleService } from '../../services/headerTitle.service';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss'],
providers: [HeaderTitleService]
})
export class HomeComponent implements OnInit {
constructor(
private headerTitleService: HeaderTitleService
) { }
ngOnInit() {
this.headerTitleService.setTitle('hello');
}
}
The line providers: [HeaderTitleService] in each component means that they will be given one HeaderTitleService each, rather than one between them.
To fix this remove providers: [HeaderTitleService] from your components, and place it in your module definition instead:
#NgModule({
providers: [HeaderTitleService]
})
Move HeaderTitleService in providers of your module. With your implementation you receive new instance of the HeaderTitleService in each component.
Hope this helps.
I'm using a service to pass data between child and parent with the purpose being to update the parent ui with child specific info depending on what child is loaded.
Service:
import { Subject } from "rxjs/Subject";
export class ChildDataService {
private childDetails = new Subject<{}>();
childLoaded$ = this.childDetails.asObservable();
changedComponentName(option: {}){
this.childDetails.next(option);
}
}
Parent Component:
import { Component, OnInit, ViewEncapsulation } from '#angular/core';
import { ChildDataService } from "../core/helpers/child-data.service";
import { Subscription } from "rxjs/Subscription";
#Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class ParentComponent implements OnInit {
childDetails: {title?: string};
private subscription:Subscription;
constructor( private childDataService: ChildDataService) {
this.childDataService.childLoaded$.subscribe(
newChildDetails => {
console.log(newChildDetails);
this.childDetails = newChildDetails
});
}
}
Example Child Component:
import { Component, OnInit, ViewEncapsulation } from '#angular/core';
import { ChildDataService } from "../../core/helpers/child-data.service";
#Component({
selector: 'app-child-dashboard',
templateUrl: './child-dashboard.component.html',
styleUrls: ['./child-dashboard.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class ChildDashboardComponent implements OnInit {
constructor(private childDataService: ChildDataService) { }
public ngOnInit() {
this.childDataService.changedComponentName({
title: 'Dashboard'
});
}
}
Parent HTML:
<div class="subheader">
<h1>{{ childDetails?.title }}</h1>
<button *ngIf="childDetails?.title == 'Dashboard'">dashboard</button>
<button *ngIf="childDetails?.title == 'SecondChild'">Second Child</button>
</div>
With this setup I am getting the error "ExpressionChangedAfterItHasBeenCheckedError" when i click on a routerLink, now if i click on the same link a second time, the error persists but the correct button becomes visible. Spent all weekend getting nowhere with this, so any help would be greatly appreciated.
public ngOnInit() {
setTimeout(() => {
this.childDataService.changedComponentName({
title: 'Dashboard'
}), {});
}
it should work.
async ngOnInit() {
await this.childDataService.changedComponentName({
title: 'Dashboard'
});
}
I am trying to make import a service inside a component but when I call the Input coming from this service, in my template, it does not render anything.
Here is my entity:
export interface PageState {
step: string;
}
export class SimplePageState implements PageState {
step: string;
}
Here is my service:
import { Injectable } from '#angular/core';
import { PageState } from './state.entity';
#Injectable()
export class PageStateService {
getPageState(): Promise<PageState[]> {
const step = [{ 'step': '1' }];
return Promise.resolve(step);
// return this.http.get('/api/status');
}
}
I am importing and instantiating these in my main component:
import { Component, OnInit } from '#angular/core';
import { Module } from '../modules/core/module.entity';
import { ModuleService } from '../modules/core/module.service';
import { PageState } from './state.entity';
import { PageStateService } from './state.service';
#Component({
selector: 'df-esign',
templateUrl: './esign-page.html',
styleUrls: ['./esign-page.scss'],
providers: [ ModuleService, PageStateService ]
})
export class EsignComponent implements OnInit {
modules: Module[];
pageState: PageState[];
constructor(private moduleService: ModuleService, private pageStateService: PageStateService) { }
getModules() {
this.moduleService.getModules().then(modules => this.modules = modules);
}
getPageState() {
this.pageStateService.getPageState().then(pageState => this.pageState = pageState);
}
ngOnInit() {
this.getModules();
this.getPageState();
}
}
And finally, I am using SimplePageState inside of a particular component, this way:
import { Component, Input } from '#angular/core';
import { SimpleModule } from '../core/module.entity';
import { SimplePageState } from '../../core/state.entity';
#Component({
selector: 'df-module-page',
templateUrl: './module-page.html',
styleUrls: ['./module-page.scss'],
})
export class ModulePageComponent {
#Input() module: SimpleModule;
#Input() pageState: SimplePageState;
}
But trying to do {{pageState}} in my template gives me a blank result with no error.. Anybody can help? I've spent hours looking on the internet and trying to make it work.
Edit:
I am trying to use it inside a bread-crumbs component.
Here is the beginning of my module-view.html, which contains df-module-page as well as df-module-bread-crumbs:
<ng-container [ngSwitch]="module.type">
<template [ngSwitchCase]="'PageModule'"><df-module-page [module]="module" [pageState]="pageState"></df-module-page></template>
<template [ngSwitchCase]="'TextModule'"><df-module-text [module]="module"></df-module-text></template>
<template [ngSwitchCase]="'BreadCrumbModule'"><df-module-bread-crumb [module]="module" [pageState]="pageState" class="{{module.class}}"></df-module-bread-crumb></template>
I am calling SimplePageState in the bread-crumb-component too:
import { Component, Input, HostBinding } from '#angular/core';
import { SimpleModule } from '../core/module.entity';
import { SimplePageState } from '../../core/state.entity';
#Component({
selector: 'df-module-bread-crumb',
templateUrl: './module-bread-crumbs.html',
styleUrls: ['./module-bread-crumbs.scss']
})
export class ModuleBreadCrumbsComponent {
#Input() module: SimpleModule;
#Input() pageState: SimplePageState;
}
And I am trying to do an ngIf inside of module-breads-crumbs.html with a pageState condition which does not have any effect:
<div class="dfbreadcrumbs">
<ol *ngIf="module">
<li *ngFor="let crumb of module.slots.crumbs; let i = index" class="step_{{i + 1}}">{{crumb.text}}</li>
</ol>
</div>
<div *ngIf="pageState">ohohoh</div>
To pass data to an input you would need something like
<df-module-page [pageState]="pageState">
in the template of EsignComponent
I've been trying out Angular 2 since beta, and now with rc.0+ some things have changed.
One of those are RouteParams which cannot be imported from #angular/router. And when I try with #angular/router-deprecated I get an error message:
ORIGINAL EXCEPTION: No provider for RouteParams!
app.component:
#Routes([
{ path: '/', component: StartComponent },
{path: '/:projId/:userName', component: ProjectListComponent},
{ path: '*', component: StartComponent },
])
project-list.component:
import {Component, OnInit} from '#angular/core';
import {RouteParams} from '#angular/router-deprecated';
#Component({
...
})
export class ProjectListComponent implements OnInit {
userName:string;
projId:string;
constructor(private params:RouteParams) {
this.userName = params.get('userName');
this.projId = params.get('projId');
}
}
Where can I import the RouteParams from now, or is it something else I'm doing wrong?
Thanks!
One way is
routerOnActivate(curr: RouteSegment) {
this.userName = curr.getParam('userName');
this.projId = curr.getParam('projId');
}
You have to use RouteSegment instead of using RouteParams in angular2 RC. like this :-
import { Component } from '#angular/core';
import { Routes, RouteSegment, ROUTER_DIRECTIVES } from '#angular/router';
#Component({
selector: 'about-item',
template: `<h3>About Item Id: {{id}}</h3>`
})
class AboutItemComponent {
id: any;
constructor(routeSegment: RouteSegment) {
this.id = routeSegment.getParam('id');
}
}
#Component({
selector: 'app-about',
template: `
<h2>About</h2>
<a [routerLink]="['/about/item', 1]">Item 1</a>
<a [routerLink]="['/about/item', 2]">Item 2</a>
<div class="inner-outlet">
<router-outlet></router-outlet>
</div>
`,
directives: [ROUTER_DIRECTIVES]
})
#Routes([
{ path: '/item/:id', component: AboutItemComponent }
])
export class AboutComponent { }