angular-components

I'm trying to use a component I created inside the AppModule in other modules. I get the following error though: "Uncaught (in promise): Error: Template parse errors: 'contacts-box' is not a known element: If 'contacts-box' is an Angular component, then verify that it is part of this module. If 'contacts-box' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. My project structure is quite simple: I keep my pages in pages directory, where each page is kept in different module (e.g. customers-module) and each module has

I'm trying to execute a function from another component ( These 2 components are NOT siblings ). My guess is that I will need to use @Output and eventEmitter to accomplish this or create a Service and subscribe to the Observable to share the same data throughout all the components (I know how to pass a message( string) but I don't know how to execute a function). I'm not really sure where to start. I'm trying to execute function1 FROM function2 . Can anyone help me on how to get this to work? Please provide a plunker . This is what my project looks like: src |__app(FOLDER) |__home(FOLDER) | |

I have component in Angular 2 called my-comp: <my-comp></my-comp> How does one style the host element of this component in Angular 2? In Polymer, You would use ":host" selector. I tried it in Angular 2. But it doesn't work. :host { display: block; width: 100%; height: 100%; } I also tried using the component as selector: my-comp { display: block; width: 100%; height: 100%; } Both approaches don't seem to work. Thanks. There was a bug, but it was fixed in the meantime. :host { } works fine now. Also supported are :host(selector) { ... } for selector to match attributes, classes, ... on the host

My Page structure is: <app-header></app-header> <router-outlet></router-outlet> <app-footer></app-footer> How can I update/refresh the app-header component, without refreshing the whole page? I want to hide a "Sign-In" link in the header, once the user had successfully logged in. The header is common in all the components/routes. You can use a BehaviorSubject for communicating within different components throughout the app. You can define a data sharing service containing the BehaviorSubject to which you can subscribe and emit changes. Define a data sharing service import { Injectable } from '

I have created a child component which has a method I want to invoke. When I invoke this method it only fires the console.log() line, it will not set the test property?? Below is the quick start Angular app with my changes. Parent import { Component } from '@angular/core'; import { NotifyComponent } from './notify.component'; @Component({ selector: 'my-app', template: ` <button (click)="submit()">Call Child Component Method</button> ` }) export class AppComponent { private notify: NotifyComponent; constructor() { this.notify = new NotifyComponent(); } submit(): void { // execute child