I have two components and they are situtated in the different routes. In the Second component There is a div. I want to route from first component to the div of the second component. Yes, It is simple to route the second component. But I want to scroll be top of the div.
Thank you for answers.
This tag is declared in component1
<a [routerLink] = "['/c2']" fragment="c2id"> Link </a>
Here are the component2 changes
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute } from '#angular/router';
#Component({
selector: 'app-c2',
templateUrl: './c2.component.html',
styleUrls: ['./c2.component.css']
})
export class C2Component implements OnInit {
private fragment: string;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.fragment.subscribe(fragment => {
this.fragment = fragment;
});
}
ngAfterViewInit(): void {
try {
document.querySelector('#' + this.fragment).scrollIntoView();
} catch (e) {}
}
}
And your component2 html will be like this
<p style="height: 800px;">
c2 works!
</p>
<hr>
<div id="c2id" style="height: 500px;">
The div with c2id
</div>
Here is the updated and working stackblitz
https://angular-fragment-example.stackblitz.io
I think you are looking for Fragments.
Official Docs : Angular Docs- Query Params and Fragments
Examples:
Manual Navigation
in c1.html
<a [routerLink] = "['/c2']" [fragment]="c2id"> Link </a>
in c2.html
<div id="c2id">content</div>
Programatic Navigation
in c1.ts
private fragmentSetDynamically: string;
constructor(private router: Router){}
onClickButton(){
this.router.navigate(['/c2'], {fragment: fragmentSetDynamically});
}
Getting the fragment :
in c2.ts
private fragment: string;
constructor(private activatedRoute: ActivatedRoute){}
ngOnInit(){
this.fragment = this.activatedRoute.snapshot.fragment;
}
I would like a component to send input to another component. Below is the code .ts and .html. of the two components.
Now the problem is that the html page of the parent component also shows the html part of the child component ... I want the component to pass only one string to the child component
Parent.ts
import ...
#Component({
selector: 'app-parent',
templateUrl: './parent.html',
styleUrls: ['./parent.css']
})
export class ParentComponent implements OnInit {
sostegno : string;
constructor() { }
ngOnInit() { }
avvia1() {
this.sostegno = "xxx";
this.router.navigate(['./xxx'], { relativeTo: this.route });
}
avvia2()
this.sostegno = "yyy";
this.router.navigate(['./yyy'], { relativeTo: this.route });
}
}
Parent.html
<div>
...
</div>
<app-child [sostegno]="sostegno"></app-child>
Child.ts
import ...
#Component({
selector: 'app-child',
templateUrl: './child.html',
styleUrls: ['./child.css']
})
export class ChildComponent implements OnInit {
#Input() sostegno : string;
constructor() { }
ngOnInit() {
console.log(this.sostegno);
}
}
There are some changes which you need to make because looking at the code which your currently have it seems incomplete.
You are using this.router without injecting the Router class in your constructor.
You are using this.route without injecting the ActivatedRoute class in your constructor.
To test that your parent > child interaction is working you can remove your param and instead place a test for the html
<app-child [sostegno]="'Test'"></app-child>
This should work for your ngOnInit function which is inside of your child component. If this works all you need to do now is either initialize sostegno in your parent component else your console log inside your child component will not reflect the changes when you call avvia1 or avvia2 inside of your parent class.
Hope this helps!
Let's say I have in some upper level class some angular template code that looks like this
<outer-component>
<a></a>
</outer-component>
Where <a> can be any module that extends a certain interface defined elsewhere, is there a way for <outer-component> be able to take <a> or whatever is placed inside the tags and communicate with it specifically be able to listen to functions or bind to variables in a way that is as succinct as the snippet above?
If you want to share data between a parent and a child (hierarchical relationship) you can use EventEmitter to allow the parent to get data from the child.
In the child component:
import { Component, Input, Output, EventEmitter } from 'angular/core';
#Component({
selector: 'app-child',
template: `
<h3>Child</h3>
Say {{message}}
<button (click)="sendMessage()"></button>
ยด,
styleUrls: ['pathToStyles.css']
})
export class ChildComponent {
message: string = "Hello world";
#Output() messageEvent = new EventEmitter<string>();
constructor() {}
sendMessage() {
this.messageEvent.emit(this.message);
}
}
In the parent component:
import { Component } from '#angular/core';
#Component({
selector: 'app-parent',
template: `
Message: {{message}}
<app-child (messageEvent)="receiveMessage($event)"></app-child>
`,
styleUrls: ['pathToStyles.css']
})
export class ParentComponent {
constructor() { }
message:string;
receiveMessage($event) {
this.message = $event
}
}
I have a Directive which goal is to add a suggestion list under a prefix-field-text component. This component is basically a searchbar.
My directive currently look like this (in all my code pieces I removed imports to add readibility):
#Directive({
selector: '[prefixSuggest]',
exportAs: 'prefixSuggest',
host: {
'class': 'prefix-field-suggest__container'
}
})
export class PrefixFieldSuggestDirective implements AfterViewInit {
private componentReference: ComponentRef<PrefixFieldSuggestComponent>;
#Input() fieldTextRef: ElementRef;
#Input() list: Array<PrefixSuggestLineInterface>;
#ViewChild('fieldTextRef', {read: ViewContainerRef}) fieldTextContainer;
constructor(private _injector: Injector, private resolver: ComponentFactoryResolver) {
this.resolver.resolveComponentFactory(PrefixFieldSuggestComponent);
}
ngAfterViewInit(): void {
const prefixFieldSuggestFactory = this.resolver.resolveComponentFactory(PrefixFieldSuggestComponent);
this.componentReference = prefixFieldSuggestFactory.create(this._injector);
this.componentReference.instance.list = this.list;
this.fieldTextContainer.insert(this.componentReference.hostView);
}
}
And my component looks like this :
#Component({
selector: 'prefix-field-suggest',
templateUrl: './prefix-field-suggest.component.html',
styleUrls: ['./prefix-field-suggest.component.scss']
})
export class PrefixFieldSuggestComponent {
/** Item list to display */
#Input() list: Array<PrefixSuggestLineInterface>;
/** Search string typed in search input */
#Input() searchTerm: string;
/** Input ID to align itself beneath */
#Input() inputId: string;
/** Offset between the suggest and the input; default 0 */
#Input() offset: number = 0;
/** Event when an item is selected */
#Output() itemSelected: EventEmitter<any>;
}
The template file for the PrefixFieldSuggestComponent :
<div class="prefix-field-suggest"
[ngStyle]="{ 'top': offset + 'px'}">
<span *ngFor="let item of list">
{{item.title | prefixBoldifyTerm:searchTerm}} {{item.metaData}}
</span>
</div>
the PrefixSuggestLineInterface is just a contract interface so that different people in my team can implement their own suggestion lines, depending on the information they want to display into it. ATM it's basically 2 string fields.
Question :
I would like to access to the ViewContainerRef of the prefix-field-ext (searchbar) component, from my directive. I tried many things like #[fieldTextRef], #[fieldTextRef]="mysearchbar", fieldTextRef, etc ....
I tried these possibilities on this simple page :
<div class="prefix-search-group">
<prefix-field-text prefixSuggest #fieldTextRef="prefixSuggest" list="list" [identifier]="search"></prefix-field-text>
</div>
But in every cases, my fieldTextRef Input is always null. (Because it's not a child element). Is it even possible to do what I'm trying to do ?
Thanks a lot for your enlightning.
If you want to get ViewContainerRef for <prefix-field-text prefixSuggest just inject it in constructor prefixSuggest directive because it is applied on the same element:
export class PrefixFieldSuggestDirective implements AfterViewInit {
constructor(private fieldTextContainer: ViewContainerRef,...) {}
I'm Learning Angular2 so be gentle... I have a basic Component which has a string array. I want to pass an integer to this component and have it return the string found at the index of that parameter.
E.g. myComponent[number]=1 returns string "second element".
My code so far is this:
import { Component } from '#angular/core';
#Component({
selector: 'myComponent',
template:
`<h1>Returned Value {{returnedString}}</h1>,`,
inputs:['number']
})
export class MyComponent {
myStringArray: string[];
returnedString: string;
constructor(){
this.myStringArray = ['First','Second','Third','Forth','Fifth','Sixth'];
this.returnedString = 'number'+this.myStringArray['number'.valueOf()];
}
}
I am calling this component as follows
<myComponent [number]=1></myComponent>
I print the value returned to the screen and get 'undefined'.
Any ideas folks?
Since you want to bind to a custom property import Input and OnChanges from core and then implement as Input to create your custom property. The OnChanges just ensures your value gets updated when the bound value changes.
Remove the inputs key from your component decorator
import { Component, Input, OnChanges } from '#angular/core';
#Component({
selector: 'myComponent',
template:
`<h1>Returned Value {{returnedString}}</h1>,`
})
export class MyComponent implements OnChanges {
myStringArray: string[];
returnedString: string;
#Input() inputNumber: number;
constructor(){
this.myStringArray = ['First','Second','Third','Forth','Fifth','Sixth'];
this.returnedString = 'number'+this.myStringArray[Number(this.inputNumber)];
}
ngOnChanges() {
this.returnedString = 'number'+this.myStringArray[Number(this.inputNumber)];
}
}
Update your code usage to the following
<myComponent [inputNumber]="1"></myComponent>
Here is a sample plunker.
https://plnkr.co/edit/S074zoVJ3ktQDKkcQgxe?p=preview
I had tough time to send string inputs. here is the correct way,
<myComponent [stringvar]="'string value'"></myComponent>
"string value" will not work. angular expecting object or number inside double quotes. string should be inside single quotes within double quotes "'string'"
You need to create a number variable in your component too that will hold the value.
import {Component, OnInit} from '#angular/core';
#Component({
selector: 'myComponent',
template:
`<h1>Returned Value {{returnedString}}</h1>,`,
inputs:['myNum']
})
export class MyComponent implements OnInit {
myStringArray: string[] = ['First','Second','Third','Forth','Fifth','Sixth'];
returnedString: string;
public myNum: number; <= here is your variable
ngOnInit() {
//you can use this.myNum anywhere now like this
this.returnedString = 'number '+ this.myStringArray[this.myNum];
}
constructor(){
}
}
You may have to change the name of your input because number is a keyword.
Another Note: You have to use OnInit instead of constructor to start using your inputs. ngOnInit is an Angular2 lifecycle method that is called by Angular when it's done building the component and evaluated the bindings
Here is another alternative. It demonstrates how to use a getter for returnedString. Less code needed than with ngOnChanges.
import { Component, Input } from '#angular/core';
#Component({
selector: 'my-cmp',
template: `
<p>returnedString = {{ returnedString }}</p>
`
})
export class MyComponent {
myStringArray: string[] = ['First','Second','Third','Forth','Fifth','Sixth'];
#Input() stringIndex: number;
get returnedString(): string {
if (this.stringIndex !== undefined) {
return this.myStringArray[this.stringIndex];
}
}
}
It's quite simple. See this demo. Let's say you have two components parent and child. And you want to pass a variable to child and modify it there, say views.
On parent template:
<child [(views)]="views"></child>
On child component:
#Input() views: number;
#Output() viewsChange = new EventEmitter<number>();
// Bind this function to button click or some events:
updateViews() {
this.views++;
this.viewsChange.emit(this.views); // Emit the value to parent:
}
Detail explanation:
When you bind [(views)] in parent, it is acting as:
<child
[views]="views"
(viewsChange)="views = $event">
</child>
So, it is listening to viewsChange output function. Whenever, you do viewsChange.emit, the parent views get updated.
Gotcha: The output function should be precisely named $var + "Change". If you chose to name something else you will have to do:
<child
[views]="views"
(customEmitterFunction)="views = $event">
</child>
In order to pass data from the child component to the father component you shuold set an Output parameter, to trigger the signal your component should implements the OnChanges interface, your component should be like this
import { Component, Input,Output,EventEmitter,OnChanges,SimpleChanges } from '#angular/core';
#Component({
selector: 'my-cmp',
template: `
<p>returnedString = {{ returnedString }}</p>
`
})
export class MyComponent implements OnChanges {
myStringArray: string[] = ['First','Second','Third','Forth','Fifth','Sixth'];
#Input() stringIndex: number;
#Output() cardinalNumber:EventEmitter<string> = new EventEmitter<string>();// you define an Output, this will emit a signal that will received from the father Component
ngOnChanges(changes:SimpleChanges) {
// when the input changes we emit a signal
this.cardinalNumber.emit(this.myStringArray[this.stringIndex]);
}
get returnedString(): string {
if (this.stringIndex !== undefined) {
return this.myStringArray[this.stringIndex];
}
}
}
then in the template of the father component you should insert :
<my-cmp [stringIndex]=the parameter in father Component's controller
(cardinalNumber)="method2beinvoked($event)">
</my-cmp>
method2beInvoked is the method in the father component that handles the message;
or you could do like this:
<my-cmp [stringIndex]=the parameter in father Component's controller
(cardinalNumber)="parameter=$event")>
</my-cmp
where parameter is a parameter in the father's component controller