angular-components

This question already has an answer here: How can I communicate between two child components in angular? [duplicate] 4 answers I have a parent component and inside there are 2 different child components. I need to call the second child component's function from the first child component when I click a link in the first child component. So here is a basic diagram to explain better: You could archieve this by means of ViewChild and Output For example: @Component({ template: ' <child-one (clicked)="handleClick()"></child-one> <child-two></child-two> ' }) export class ParentComponent { @ViewChild

I have problems with my angular, here I have two components: MyApp (ParentComponent) LoginPage (ChildComponent) I have a property UserNow in parts MyApp and I want to set the value of the property UserNow through the components LoginPage . How to do it? I have tried (but did not give any influence) Import {MyApp} from '../../app/app.component'; @Component({ selector: 'page-login', templateUrl: 'login.html' }) export class LoginPage { public app: any; login() { ... this.app = MyApp; this.app.userNow = MyValue; ... } } There are several ways to do it. 1) Using a service: A service generally has

I have just installed a bearbones ng2 app using the ng2 cli. In my AppModule I added schema: [ CUSTOM_ELEMENTS_SCHEMA ] , and in my AppComponent template I have <row></row> . But I'm getting- Unhandled Promise rejection: Template parse errors: 'row' is not a known element: 1. If 'row' is an Angular component, then verify that it is part of this module. 2. If 'row' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->] AppModule- import { BrowserModule } from '@angular/platform-browser'; import { NgModule, CUSTOM

My situation: I have a component showing tiles with each tile representing an object from an array that is looped over with an ngfor. When a tile is clicked I want to pass the object to a different component, which is responsable for displaying all properties of that object in fields that can be modified. What I have tried: After doing some research and coming across multiple posts showing me how to achieve this for a parent - child hierarchy and some posts explaining that it is necessary to use a shared service in order to achieve the wanted funcitonality, I decided to try and setup such a

Lazy loading is a commonly used technique. However, in Angular it seems that the granularity level of this technique stops at the module level. That means that you can have module main that loads in the browser, and then on special occasion module B and C and D can be loaded lazily. Almost all tutorials on web explain that. However, is there a way to load components lazily? Consider this simple example that user goes inside the application, and when clicks "invoices" link, URL changes to the new route /invoice/list and a progress bar shows loading, while the invoices component including HTML

In my main app.ts I've declared a global provider : providers: [{provide: Dependency, useValue: createDependency('AppModule provider')}] ( Where createDependency is just a function that returns a class which has a getName() method. ) I also have a components : <my-app-component-3>Hello from 3</my-app-component-3> Code : @Component({ selector: 'my-app-component-3', template: ` <div>Component3: <ng-content></ng-content> : <span [innerHTML]="dependency?.getName()"></span> </div> `, }) export class Component3 { constructor(@Host() @Optional() public dependency: Dependency) {} } The result is:

So, let's say I have a component, ExampleComponent , that builds a QueryList of SomeOtherComponent components in its content view. import {Component, ContentChildren, QueryList} from '@angular/core' import {SomeOtherComponent} from '../some-other-component/some-other-component.component' @Component({ selector : 'app-example', templateUrl: './example.component.html', styleUrls : ['./example.component.css'] }) export class ExampleComponent { @ContentChildren(SomeOtherComponent) someOtherComponents: QueryList<SomeOtherComponent> } In its template, I have an NgFor that should insert a <hr />

Is it possible to declare a component with a generic type in Angular 4? The following code causes build errors: export class MyGenericComponent<T> implements OnInit { @Input() data: BehaviorSubject<T[]>; //... } The error when executing ng serve is: ERROR in C:/.../my-generic.module.ts (5,10): Module '"C:/.../my-generic.component"' has no exported member 'MyGenericComponent'. Example: The following example is an attempt to implement a generic data table where @Input() data changes from one component 'calling this component' to another. The question is could BehaviorSubject<any[]> be changed to