I tried to let my child component to read parents HTML's ngfor value to display the child page. But the child component seems didn't get the index number from the parent page.
This is my Parents: app.component.html:
<ul *ngFor="let item of formDoc.components | keyvalue: valueAscOrder; let i = index ">
<li *ngIf="item.value['type'] == 'columns'">
<mat-card [style.backgroundColor]="'white'" [style.border]="lightgrey" [style.width]="'50%'">
{{item.value["label"]}}
<app-columns [indexnumber]="i"></app-columns>
</mat-card>
</li>
</ul>
And this is the child: Columns.component.ts
import { FormBuilderComponent } from 'angular-formio';
import { Injectable } from '#angular/core';
import { Component, Input } from '#angular/core';
//import { ColumnComponent } from 'src/column/Column.component';
import { AppComponent } from '../app.component'
#Injectable()
#Component({
selector: 'app-columns',
templateUrl: './Columns.component.html',
styleUrls: ['./Columns.component.scss'],
})
export class ColumnsComponent {
#Input() columnsData: object[];
public saveData: object[];
#Input() public indexnumber: string;
constructor(public appComponent: AppComponent){
if (this.indexnumber) {
this.columnsData = appComponent.Temp2[this.indexnumber]["component"];
}
}
}
The value of indexnumber is always undefined. I'm wondering how to make index number in Columns.component.ts get the ngfor 'i' value?
Fist of all, the index of an array is a number, not a string. So
#Input() public indexnumber: string;
should be
#Input() public indexnumber: number;
Second: in order for angular to be able to set the indexnumber of your component, your component needs to exist. So it must have been constructed before. So, at the time the constructor is invoked, the input can't possibly have been set yet. So trying to access the value of an input in the constructor can't possibly give you the value passed by the parent.
Use ngOnInit or ngOnChanges. That's the methods that are called when the inputs are set for the first time/changed.
How to dynamically change which property is set on an HTML element in the template?
I have an anchor wrapper component, which accepts both href and routerLink properties. Only one of them needs to be set. I want to write it's template, so that I'm setting only one of href and routerLink attributes on <a> element, whichever is defined.
Is it possible without separately defining both cases with *ngIf?
anchor.component.ts
import { Component, Input, OnInit } from '#angular/core';
#Component({
selector: 'my-anchor',
templateUrl: './anchor.component.html',
styleUrls: ['./anchor.component.scss'],
})
export class AnchorComponent implements OnInit {
#Input() public label: string;
// Only one of href and routerLink must be specified
#Input() public href?: string;
#Input() public routerLink?: string;
ngOnInit() {
this.ensureEactlyLinkTargetDefined();
}
private ensureEactlyLinkTargetDefined(): void {
if (!((this.href && !this.routerLink) || (!this.href && this.routerLink))) {
throw new Error("Exactly one of the properties 'href' and 'routerLink' must be defined");
}
}
}
anchor.component.html
<a
<!--
Here lies the problem. I only want to set one of those
attributes, not both simultaneously, as then href is not
respected, as routerLink directive overwrites it
-->
[href]="href"
[routerLink]="routerLink"
<!--
Something like [attr]="setAttribute(attributeName, attributeValue)"
-->
>
{{ label }}
</a>
Well instead of binding an attribute/directive, you should bind an event :
<a (click)="doSomething($event)">My link</a>
doSomething(event: MouseEvent) {
if (condition) this.router.navigate(url); // [routerLink]
else window.location.href = url; // href
}
EDIT If you want to achieve that, simply put this code into a directive
#Directive({ selector: 'navigator' })
export class NavigatorDirective {
#Input('navigator.condition') condition: boolean;
constructor(private router: Router) {}
#HostBinding('click', ['$event'])
doSomething(event: MouseEvent) {
if (this.condition) this.router.navigate(url); // [routerLink]
else window.location.href = url; // href
}
}
<a [navigator]="url" [navigator.condition]="myCondition">My link</a>
I've built a component
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-g-switch',
template: `
<div id="switch" (click)='toggle()' [ngStyle]="{'background-image': 'url('+photo+')'}"></div>
`,
styleUrls: ['./g-switch.component.scss']
})
export class GSwitchComponent implements OnInit {
_value: number;
photo = '../../assets/sw-1-1.png';
constructor() { }
ngOnInit() {
// this._value = 1;
}
public returnValue(): number {
return this._value;
}
toggle() {
this._value++;
if (this._value === 4) {
this._value = 1;
}
this.photo = '../../assets/sw-1-' + this._value + '.png';
}
}
which I include in my template with
<app-g-switch #sw1></app-g-switch>
I'd like to be able to pass value to the component, which I've seen done before like this,
<app-g-switch #sw1 [value]="2"></app-g-switch>
How can this be achieved? I tried to implement a setter but it didn't work.
The Angular documentation has a sub-section under their Template and Data Binding documentation which describes the #Input and #Output template syntax that you're looking for.
See Angular's documentation on Input and output properties.
Example
In your scenario, you want to be able to initialize the _value variable from an HTML directive on your components selector.
Mark _value with the #Input decorator to declare it as an input directive field.
#Input
_value: number;
Now, you can set the _value parameter from your component selector, as follows,
<app-g-switch [_value]="1"> </app-g-switch>
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
I want to have a fixed element by posisioned according to its parent and not the browser. I have thus design a (quick and dirty) angular2 directive :
My template
<div class="main" style="position: relative">
<div style="position: absolute" positioningFromParent="left" [additionalPixels]=20>
...
</div>
</div>
My Angular2 Directive
import { Directive, ElementRef, Input, OnInit } from "angular2/core"
#Directive({
selector: "[positioningFromParent]"
})
export class PositioningFromParent implements OnInit {
private el:HTMLElement
#Input() positioningFromParent: string = ""
#Input() additionalPixels: number = 0
constructor(el: ElementRef) {
this.el = el.nativeElement
}
ngOnInit() {
let v = this.el.parentNode.getBoundingClientRect()[this.positioningFromParent]
this.el.style[this.positioningFromParent] = (v + this.additionalPixels).toString() + "px"
}
}
However, it doesn't work as the width of my main element is set dynamically (I can't specify it). When the ngOnInit runs, it gives me a width of 0 as its width only comes later. How could I "watch" the parent's width in angular2 ?
Thanks
The view is not ready in ngOnInit() use ngAfterViewInit() instead.
import { Directive, ElementRef, Input, AfterViewInit } from "angular2/core"
#Directive({
selector: "[positioningFromParent]"
})
export class PositioningFromParent implements AfterViewInit {
private el:HTMLElement
#Input() positioningFromParent: string = ""
#Input() additionalPixels: number = 0
constructor(el: ElementRef) {
this.el = el.nativeElement
}
ngAfterViewInit() {
let v = this.el.parentNode.getBoundingClientRect()[this.positioningFromParent]
this.el.style[this.positioningFromParent] = (v + this.additionalPixels).toString() + "px"
}
}
You should use the ngAfterViewInit lifecycle hook instead of ngOnInit, because this will be called after the actual DOM elements have been created (ngOnInit is only called once the component's inputs have been resolved). Using ngAfterViewInit should mean the parent's width is non-zero by the time the code inside that function runs.