Previous solutions to my issue are outdated. I have a header component
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';
import { AuthenticationService } from '../_services/Authentication.Service';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
loading = false;
error = '';
isLoggedIn = false;
showMessageWindow = false;
messageType: string = "";
messageText: string = "";
public currentUser: any = null;
constructor(private _auth: AuthenticationService, private router: Router) { }
ngOnInit() {
if(this._auth.isLoggedIn()) {
this.isLoggedIn = true;
}
else {
this._auth.logout();
this.isLoggedIn = false;
this.router.navigate(['/']);
}
}
showMessage(message: string, type: string) {
this.messageText = message;
this.messageType = type;
this.showMessageWindow = true;
}
}
The header component is responsible for managing navigation based on log-in status. It also contains a warning/alert feature. Since not all pages use the header, it must be imported into specific components with
<app-header></app-header>Below is an example of a component utilizing the header.
import { Component, OnInit } from '@angular/core';
import { HeaderComponent } from '../header/Header.Component';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-census',
templateUrl: './census.component.html',
styleUrls: ['./census.component.css']
})
export class CensusComponent implements OnInit {
constructor( private router: Router, private activatedRoute: ActivatedRoute) { }
ngOnInit() {
}
}
I am attempting to call the showMessage() method from the header component within a different component. However, I am facing challenges in referencing the embedded component. Despite trying various methods, I haven't had much success. My main question pertains to how to correctly reference the embedded component when using separate HTML files.
When adding
@ViewChild(HeaderComponent)
private header: HeaderComponent;
to my CensusComponent, I receive a warning:
WARNING in ./src/app/header/Header.Component.ts
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers: