Below is a class Template. I want to access its content like this..
console.log(this.temp.name);
But I can't. Its result is undefined. How to make it just an object to be able to access it?
Update
In the parent component, I have the code below
template is declared as template = new Template();
after the initialization, when I console log template, the value is this
I then bind template to its child component
but when I console log the value of template in the child component, it became this (the extracted values are the topmost screenshot)
so when I console log this.template.name and so on, it is undefined
instead of making Template as class, make it as interface
example:
export interface Template {
/* fields */
}
To instantiate a class, you can either use the new keyword, assign a json structure that is structural compatible to the class definition or if you have a JSON string and want to de serialize it you could use JSON.parse() and assign it to a variable of this type.
Related
As I have mentioned in this question, I have a function that returns a different text based on an input.
This is working fine when I use it in static text areas, like below:
<td>{{('input_text'|fnName:dataObject:'query_param')}}</td>
How can I call this function while I am assigning data to a json object? Originally the input_text is added to the json, but I need to run a lookup and replace the text.
EDIT: The json object is assigned to a dropdown, but I doubt if I will be able to call my function in the dropdown attributes.
p.s. The content in dataObject could change while using the application; so the function should be invoked with the latest data.
Try setting the filter's $stateful property to true.
https://stackoverflow.com/a/35563980/4028303
This should make the filter re-run upon digest cycles, even if the left-side data being passed in hasn't changed.
Is there a way to dynamically add a 2 way binding [(somemodel)] property to a Host element in Angular 4 ?
<my-comp></mycomp>
We would like to replace the above markup to look like
<my-comp [(somemodel)]="modelvalue" ></mycomp>
dynamically at run time. We are aware the #HostBinding does not support this, as the most common examples we have seen are adding class or attributes to host.
Is there any way to replace the host element like this using Angular 4 ?
We are open to dynamically loading templates/components if someone can point us to the right direction.
In Angular 1, we used to replace the host element markup with our text and do a $compile(scope). Is there a similar approach in Angular 4 using dynamic loading ?
I think what you're looking for is #Input in Angular 4. It allows you to define a variable on your component and receive it's value from the HTML. Here are the Angular Docs on Input/Output
And a quick example
In your component, import 'Input' from Angular Core
import { Input } from '#angular/core';
Then, define your input variable. Here, I'm for a loading variable that is a boolean.
#Input() loading:boolean = false;
Then, in your HTML define the binding.
<loader [loading]="loading"></loader>
Remember that the 'loading' inside of the brackets will match the name of your input variable.
I was working on an angular2 project that gets an object asynchronously from the api using the new Observable framework.
this._accountsService.getAccountDetails(this.id)
.subscribe(
AccountDetails => this.accountDetails = AccountDetails,
err => this.errorMessage = <any>err,
() => console.log(this.accountDetails)
);
When we tried to access the property of that object using interpolation {{AccountDetails.UserName}} ,we got a property undefined error, because the object had not yet been received from the api. We fixed this by instantiating the object in the class
accountDetails: AccountDetails = new AccountDetails();
This works, however I noticed in Angular 1, a fake object would be created, if the object was undefined, so that there would be never be an an undefined error -- it would just show an empty value in the interpolated code. Is this a change in Angular2? Also, I noticed that when we used *ngFor in our code to iterate through the properties of an object, it would display an empty value (rather than trigger an object undefined error) if the object had not yet been received from the api. Is this something that occurs internally in the *ngFor directive?
With first piece of code you need to do following things,
1) Because it should be {{accountDetails.UserName}} (not {{AccountDetails.UserName}} ). NOTE : Please double check with U or u that I can't tell without knowing object's properties.
2) You could also use ?. like {{accountDetails?.UserName}}
I hope this will help.
Angular 2 is based off Typescript so there is stricter type checking hence the undefined error.
One thing you can do to avoid any errors is use an
*ngIf="AccountDetails.UserName"
condition on the parent tag (parent of the *ngFor loop). This way it only gets rendered once the information has been loaded from the API. You can have some loading screen with the opposite condition
*ngIf = "!AccountDetails.UserName"
so it displays till the data has been loaded and then gets swapped out once the data has been loaded.
You can remove the
accountDetails: AccountDetails = new AccountDetails();
I have two tabs in my dialog.First Tab is having a pathfield and second tab is having a multifield inside that only one widget of xtype selection(drop down) exist.I want to send the pathfield path as a query parameter to a servlet and want to populate json in the list.
I have done this by having a listener under drop-down widget.
i am using property render and its value:
function(){
var dialog = this.findParentByType('dialog');
var path=dialog.findById('path');
$.getJSON('/bin/demo?path=' + path.value,
function(jsonData){
this.setOptions(jsonData);
this.doLayout(false,false);
}
);
}
My JSON response is coming but setOptions is not a function error is coming.
Please Help!!!!
this value depends upon the context where you are making use of this.
I believe that is the problem here. this value would differ inside and outside the $.getJSON. You would need to bind the value of this object for the function.
The link has given the example also. Either you need to store reference of this to a variable or bind this reference using the bind method. Refer this for more details
How do you implement a Store to be a singleton?
In Architect my store has a property checkbox that adds the property
singleton: true,
If I add that then reload the application it fails to load (I can give more details if required about error)
Uncaught TypeError: object is not a function VM5238:3
(anonymous function) VM5238:3
Ext.ClassManager.instantiate ext-all-debug.js:5485
(anonymous function) ext-all-debug.js:2109
Ext.define.getStore
If I then remove that property it loads fine, but where I use Ext.getStore("MyStore") then the stores that are returned contain different data depending on where I'm using the store. I have a single controller where I use the class name inside the getStore method and this is used in a couple of functions inside that one controller.
Also there does not appear to be any documentation about the singleton property in the docs. If I look at Ext.data.Store there is no singleton.
I recommend you to do it the ExtJS way for handling stores and store instances...
Use the storeId along with the Ext.StoreManager. Note that each storeId need to be unique and as soon as you create a instance of a store it will register itself into the Ext.StoreManager with its storeId. You can get a store by calling the lookup('storeId') on the Ext.StoreManager. And yes you can do that from anywhere in your code.
For example all Ext.Components that mixin Ext.util.Binable (which are most (all) native components that bind a store) will be fine with the storeId string assigned to the store cfg property. The Binable mixin will internally lookup it from the StoreManager. If you need to do it yourself
//...
store: Ext.StoreMgr.lookup('storeId') || Ext.create('YourStoreClassname')
//...