access key and value of object using *ngFor
Bit confused about how to get Key and Value of object in angular2 while usng *ngFor for iteration over object. i know in angular 1.x there is syntax like
but in angular2 i don’t know i tired the same but did’t get successful. i have tried the below code but did’t run please tell me where i am doing wrong.
here is plnkr where i have tried the same : http://plnkr.co/edit/mIj619FncOpfdwrR0KeG?p=preview
I want to get key1 and key2 dynamically using *ngFor. How to get it? i searched a lot found idea of using pipe but how to use i dont know. is there any inbuild pipe for doing same in angular2 ?
You could create a custom pipe to return the list of key for each element. Something like that:
and use it like that:
Edit
You could also return an entry containing both key and value:
and use it like that:
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
Angular — Use pipes in services and components
In AngularJS, I am able to use filters (pipes) inside of services and controllers using syntax similar to this:
Is it possible to use pipes in services/components like this in Angular?
As usual in Angular, you can rely on dependency injection:
Add DatePipe to your providers list in your module; if you forget to do this youll get an error no provider for DatePipe:
Be warned though that the DatePipe was relying on the Intl API until version 5, which is not supported by all browsers (check the compatibility table).
If you’re using older Angular versions, you should add the Intl polyfill to your project to avoid any problem. See this related question for a more detailed answer.
Promise:
How does an Angular application written in TypeScript run on a browser?
There is one very important term that you need to understand here and that is transpilation. Typescript is an open source programming language developed and maintained by Microsoft. To put it simply, browsers don’t support TypeScript, they support Javascript. So, in order for the browser to understand our code, we use a transpiler to convert it into Javascript. We all know that compilation involves converting a high level language into machine understandable code. In transpilation we convert a high level language to another high level language.
Your project will typically contain a tsconfig.json file that has the configuration information for transpilation.
The first option target specifies the version of ES, by default it is ES5. It might throw an error if you set it to ES6 since all browsers are not fully compatible with it yet. You can read more about the compiler options here.
Good to hear:
Red flags:
How to pass URL arguments (query string) to a HTTP request on Angular
Hi guys I’m creating a HTTP request on Angular, but I do not know how to add URL arguments (query string) to it.
Now my StaticSettings.BASE_URL is something like a url with no query string like: http://atsomeplace.com/ but I want it to be http://atsomeplace.com/?var1=val1&var2=val2
Where var1, and var2 fit on my Http request object? I want to add them like an object.
and then just the Http module do the job to parse it into URL query string.
The HttpClient methods allow you to set the params in it’s options.
You can configure it by importing the HttpClientModule from the @angular/common/http package.
After that you can inject the HttpClient and use it to do the request.
You can find a working example here.
For angular versions prior to version 4 you can do the same using the Http service.
The Http.get method takes an object that implements RequestOptionsArgs as a second parameter.
The search field of that object can be used to set a string or a URLSearchParams object.
An example:
The documentation for the Http class has more details. It can be found here and an working example here.