i am trying to modify the value of the numeric text box but while updating it creates a never ending loop. the model binding should update only once
Component below
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `<kendo-numerictextbox
[spinners]="showButtons"
[restrictDecimals]="true"
[round]="false"
[decimals]="decimals"
[format]="c2"
[ngModel]="value"
(ngModelChange)="onValueChange($event)"></kendo-numerictextbox> `
})
export class AppComponent {
public showButtons: boolean = false;
public format: string;
public decimals: number = 2;
public value: number = 0;
onValueChange(value: string) {
this.value = value + ' USD';
alert(value);
}
}
attached plnkr : http://plnkr.co/edit/kjl7e1wrFJGmpKa008cT
Note that the component works with digits only and the value that you are passing is invalid.
Related
I am using this wrapper for the azure maps library. I am currently implementing a symbol layer and using one of the default markers works well, but I am not able to add my own marker. I tried to add a custom marker like in my mapReady function, but the response is always undefined and the image is not added.
this is my component:
import {Component, Input, OnInit} from '#angular/core';
import * as atlas from 'azure-maps-control';
#Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {
private markerImagePath = 'assets/images/map-marker.png';
public dataSource: atlas.source.DataSource;
markerDescription: 'marker';
public options: atlas.IconOptions = {
image: this.markerDescription
};
points = [
[52.52437, 13.41053],
[51.50853, -0.12574]
];
ngOnInit() { }
mapReady(map: atlas.Map) {
map.imageSprite.add(this.markerDescription, this.markerImagePath).then(r => {
console.log(r);
console.log(map.imageSprite.getImageIds());
this.dataSource = new atlas.source.DataSource('markers');
this.points.forEach(p => {
const point = new atlas.Shape(new atlas.data.Point([p[1], p[0]]));
this.dataSource.add([point]);
});
});
}
}
this is my html:
<section>
<div class="row">
<div class="col-12 map-dimensions my-2 mx-auto" azure-map zoom="2"
[dataSources]="[dataSource]" (onReady)="mapReady($event.map)">
<map-symbol-layer dataSourceId="markers"
[iconOptions]="options"></map-symbol-layer>
</div>
</div>
</section>
I suspect, that I access the map data wrongly... Do any of you guys know, how I can add a custom image to the imageSprites in order for me to use it as a marker in the symbol layer?
Your code looks fine. imageSprite.add returns a Promise<void>, so your console.log will always log undefined. Could your icon be the issue ? I have been trying a similar solution and all works fine on my side :
import { Component } from '#angular/core';
import * as atlas from 'azure-maps-control';
#Component({
selector: 'app-root',
template: '<azure-map zoom="2" [dataSources]="[dataSource]" (onReady)="mapReady($event.map)">' +
'<map-symbol-layer [id]="blueLayerId" dataSourceId="blue" [iconOptions]="blueIconOptions"></map-symbol-layer>' +
'</azure-map>',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
public dataSource: atlas.source.DataSource;
public blueLayerId: string = "blueLayer";
public blueIconOptions: atlas.IconOptions = {
image: 'campground'
};
mapReady(map: atlas.Map) {
map.imageSprite.add('campground', 'assets/campground.png').then(() => {
this.dataSource = new atlas.source.DataSource('blue');
for (let i = 0; i < 10; i++) {
const point = new atlas.Shape(new atlas.data.Point([i * 5, i * 5]));
this.dataSource.add([point]);
}
});
}
}
I have a Service that calls an API (Http get request) then I call the service within my component to get the data and then assign it to a value. after that I pass the value in the html to another component but it showing as undefined
import { Component } from '#angular/core';
import { AuthService } from '../../src/app/services/auth.service';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
passData: any
constructor(private authService: AuthService) {
}
ngOnInit() {
this.authService.test().subscribe(data => {
for (var i = 0; i < data.length; i++) {
data[i].date = new Date(
data[i].date.substring(0, 4)+'-'+
data[i].date.substring(4, 6)+'-'+
data[i].date.substring(6, 10)+ ' '+data[i].minute)
}
this.passData = data;
});
}
}
below is where I pass in my value to the new component, but showing undefined
<div class="card-deck">
<app-stock-bar [customTitle]=passData></app-stock-bar>
The value of passData when passed is undefined, but if I log it, it will display the value in the console
the answer was very simple after some research I found that you can simply use *ngIF to check if the value is present before you load
<app-stock-bar *ngIf="passData" [customTitle]="passData"></app-stock-bar>
When you are passing the value from parent to child component. You can access it inside onChanges LifeCycle hook.
Component
#Component({})
export class AppStockBar implements OnChanges{
#Input() customTitle;
ngOnChanges(){
console.log(this.customTitle);
}
}
I think the property binding missing double quotes
<app-stock-bar [customTitle]="passData"></app-stock-bar>
I tried one of the example given on the MaskedTextBox component page but while assigning the mask or rules on ngOnInit, it gives error :
Expression has changed after it was checked. Previous value:
'undefined'. Current value: '__ ___'
How to achieve changing mask property on the fly?
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template:
<kendo-maskedtextbox
name="value1"
[(ngModel)]="value"
[mask]="mask"></kendo-maskedtextbox>
})
export class AppComponent {
public value: string;
public mask: string;
public maskValidation: boolean = true;
ngOnInit(){
this.mask = "99 999";
}
}
Attached plunker:
Kendo Masked Text Box
This seems like a bug to me. You should definitely open an issue in the GitHub repository.
In my angular 2 application there is a component containing an array of objects that is passing the chosen (clicked) one to it's direct child component. This does display the data more detailed. I'm using the "SimpleChanges" feature to watch in this child component if the object given changed to make another http request to get the related comments from a database.
If I try to build it with npm I get an error, saying :
app/displayEntry.component.ts(23,41): error TS2339: Property 'entry' does not exist on type 'SimpleChanges'
If I just comment this part out, start npm and finally put it in there again and save it, there is no Problem anymore ( no erro and it works ).
My question is, is there a way to work around this behavior and can this cause any trouble later I don't foresee or should I just ignore it? Thanks for your help
Parent component:
import { Component, OnInit } from '#angular/core';
import { entry } from './Objekte/entry';
import { entryService } from './entry.service'
#Component({
templateUrl: 'app/Html_Templates/displayLastEntrys.template.html'
})
export class displayLastEntrys implements OnInit{
public entrys : entry[];
private entryChoosen: boolean;
private ChoosenEntry : entry;
constructor ( private entryservice : entryService){
this.entryChoosen = false;
}
ngOnInit() : void {
this.getData();
}
getData() {
this.entryservice.getFirstEntrys().then(entrys => this.entrys = entrys);
}
entryClicked(ent: entry){
this.entryChoosen = true;
this.ChoosenEntry = ent;
}
leaveEntry () {
this.entryChoosen = false;
}
voted( upordown : boolean ) {
}
}
Child component:
import { Component, Input, Injectable, OnChanges , SimpleChanges, Output, EventEmitter} from '#angular/core';
import { entry} from './Objekte/entry';
import { entryService } from './entry.service';
import { comment } from './Objekte/comments';
#Component({
selector: 'display-entry',
templateUrl: 'app/Html_Templates/displayEntry.template.html'
})
export class displayComponent implements OnChanges{
#Input() public entry : entry;
public comments : comment[];
private changecounter : number;
constructor(private service : entryService) {
this.changecounter = 0;
}
ngOnChanges(changes : SimpleChanges){
this.service.getComments(changes.entry.currentValue.id)
.then(com => this.comments = com )
.catch();
this.entry.viewed++;
// To implement :: change database
}
votedUp () : void {
this.entry.votes ++;
// To implement :: change database
}
votedDown () : void {
this.entry.votes --;
// To implement :: change database
}
}
The accepted solution is suboptimal for TypeScript, as you're defeating the type system.
SimpleChanges does not have an entry property, so the compiler quite rightly balks. The solution is to treat the changes object as an array:
ngOnChanges(changes : SimpleChanges){
if (changes['entry']) {
this.service.getComments(changes['entry'].currentValue.id)
}
}
Then you can continue to strongly type the ngOnChanges method.
To make the compiler not complain just change your method definition for parameter one from SimpleChanges to any:
ngOnChanges(changes: any) {
//...
Maybe it's changed a lot now but this works these days
import {Component, Input, OnChanges, SimpleChanges} from '#angular/core';
import {ConfigModel} from './config.model'
#Component({
selector: 'selector',
templateUrl: './template.html',
styleUrls: ['./styles.scss']
})
export class BlaComponent implements OnChanges {
#Input() config: ConfigModel;
ngOnChanges(changes: SimpleChanges): void {
if (changes.config && changes.config.currentValue) {
let config = <ConfigModel>changes.config.currentValue;
// do more
}
}
}
I myself got the compile error because i wasn't using .currentValue after calling changes.config
If you are completely dependent on the IDE's auto-completion, make sure to actually use SimpleChanges instead of just SimpleChange. A very thing to be overlooked at.
I want Wijmo FlexGrid column width should cover full width.
As I'm dynamically assigning the columns so can't use [width]="'*'"
Assign a template reference variable to the grid. E.g. flex1
<wj-flex-grid #flex1
[itemsSource]="data">
<wj-flex-grid>
Then in the ngAfterViewInit callback set up your columns and assign the column in question the width '*', e.g.
import { Component, ViewChild, AfterViewInit } from '#angular/core';
import { Collection } from 'wijmo/wijmo';
import { FlexGrid } from 'wijmo/wijmo.grid';
#Component({ ... })
export class MyComponent implements AfterViewInit {
#ViewChild('flex1') protected grid: FlexGrid;
protected data: any;
constructor() {
this.data = new Collection([
{ id: 1, country: 'United States' },
{ id: 2, country: 'Germany' },
]);
}
public ngAfterViewInit() {
// Missing part: Set up columns programmatically
// OP has done this already.
// Set the column width of the column with binding to the `country` property
this.grid.columns.getColumn('country').width = '*';
}
}