EDIT: I am using AngularDart 5 and i have created an issue on GitHub https://github.com/dart-lang/angular/issues/1311
I have got this AngularDart Component:
#Component(
selector: 'todo-list',
template: '<div>{{todos | async}}</div>',
directives: [coreDirectives],
pipes: const [AsyncPipe])
class TodoListComponent {
Stream<List<TodoItem>> todos =
new TodoListViewModelImpl(new TodoServiceImpl()).output.todoItems;
}
As you can see, this is working like expected. The template displays an empty list, because there has not todo item been inserted yet.
However i do not want to have a todos attribute to access output.todoItems.
I want to access output.todoItems directly from the template using dotted notation:
#Component(
selector: 'todo-list',
template: '<div>{{viewModel.output.todoItems | async}}</div>',
directives: [coreDirectives],
pipes: const [AsyncPipe])
class TodoListComponent {
TodoListViewModel viewModel =
new TodoListViewModelImpl(new TodoServiceImpl());
}
BUT this does not work actually. I dont get any error messages whatsoever.
Related
I'm trying to use the import method to parse a json file, this is what my code looks like.
import { Component } from '#angular/core';
import * as data from './cities.json';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'weather-app';
cities: any = (data as any).default;
constructor(){}
ngOnInit(){
console.log(data);
}
}
and this is how i'm trying to display it,
<ul *ngFor="let c of cities">
<li>{{c.CityName}}</li>
</ul>
My console log displays everything but it does not appear in the angular app list, What am i doing wrong here? I'll post the json file i'm trying to parse below. thanks in advance :)
{"List":
[{"CityCode":"1248991","CityName":"Colombo","Temp":"33.0","Status":"Clouds"},
{"CityCode":"1850147","CityName":"Tokyo","Temp":"8.6","Status":"Clear"},
{"CityCode":"2644210","CityName":"Liverpool","Temp":"16.5","Status":"Rain"},
{"CityCode":"2988507","CityName":"Paris","Temp":"22.4","Status":"Clear"},
{"CityCode":"2147714","CityName":"Sydney","Temp":"27.3","Status":"Rain"},
{"CityCode":"4930956","CityName":"Boston","Temp":"4.2","Status":"Mist"},
{"CityCode":"1796236","CityName":"Shanghai","Temp":"10.1","Status":"Clouds"},
{"CityCode":"3143244","CityName":"Oslo","Temp":"-3.9","Status":"Clear"}]}
This is because your root object is not of type Array, your object is
{
List: city[]
}
You may access the property List
<ul *ngFor="let c of cities.List">
<li>{{c.CityName}}</li>
</ul>
Note: that your code needs refactoring as it does not appear as clean code. my answer is just to show to you where is the mistake
I am trying to Integrate AEM forms with Angular. I have my AEM forms url which will send the data in HTML and that HTML I have to render into Angular.
I am facing two issues :
The AEM site is hosted in different domain. So for that I added the header to stop cross domain issue and as the response I am getting is in html I have to set the response type as HTML. BY doing so the angular is able to render the HTML correctly but the the css and js are not loading properly as the response HTML has the the relative path of css and js.
As aforesaid I am using two extra parameter by build is failing by saying that only 1-2 parameter is expected in get.
TS FILE
#Component({
selector: 'app-embeddedforms',
templateUrl: './embeddedforms.component.html',
styleUrls: ['./embeddedforms.component.css']
})
export class EmbeddedformsComponent implements OnInit {
constructor(private http: HttpClient) {}
private url = 'http://localhost:4505/content/forms/af/formspoc/baggage-calculator.html';
ngOnInit() {
this.http.get(this.url, {
responseType: 'html'
}, {
headers: {
'Access-Control-Allow-Methods': 'GET',
'Access-Control-Allow-Origin': '*'
}
}).subscribe(data => {
document.getElementById('formdata').innerHTML = data;
});
}
}
html CODE
<ul>embedded forms Start Here
<li>Here we are trying to embedded the forms with angular </li>
</ul>
<div id="formdata"></div>
The expected result is that angular site should be able to embed the aem form with all it's css, js and functionality but this is not happening.
Is it possible to return JSON result from Angular instead of the HTML template coz we want to build something similar to a API-server? Thanks.
Here is the example that return the HTML template, how can we just return JSON without using template?
What I want to return is just a simple json result instead of HTML.
{"ID" : "1", "Name" : "Apple"}
Here is the code.
import { Component, OnInit, Input } from '#angular/core';
#Component({
selector: 'app-noresultsfound',
templateUrl: './noresultsfound.component.html',
styleUrls: ['./noresultsfound.component.css']
})
export class NoresultsfoundComponent implements OnInit {
#Input() txtval: string;
constructor(private app: AppConstants) { }
noresultsfound = this.app.noresultsfound;
ngOnInit() {
}
}
Alex
I think, he meant that pure JSON should be returned to who ever requested it by endpoint request. At least i faced something like this.
For static json, i've found an answer: https://github.com/angular/angular-cli/issues/5029
bresleveloper commented on 6 Jul 2018
1. ng-build with your index.html set properly with its components. (or conditional app-components)
2. rename and copy the rendered to (for example) /src/search.html
3. in angular.json (angular-cli.json for pre v5) find "assets":
"assets": [
"src/favicon.ico",
"src/search.html",
"src/assets"
],
browse localhost:4200/search.html
enjoy :)
Interesting part comes when u try to generate that json somehow, with browser not being involved - like some automatic service sends a request to some angular endpoint, like: hosname/statistics and in response, it receives a json which depends on number of pictures and headers on this current hosname, like {siteName: 'test', pictures: 10, headers: 1}.
this is my component:
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
styles: [`.sebm-google-map-container {
height: 300px;}`],
template: `<sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
</sebm-google-map>`})
just a simple example to display the map. But all this does is display the content in the (my-app) tag.
and the module is :
import { AgmCoreModule } from 'angular2-google-maps/core';
#NgModule({
imports: [
.
.
.
AgmCoreModule.forRoot({
apiKey: 'MY_API_KEY'
})
],
the value of lat and lang i'm getting from AppComponent.
export class AppComponent {
title: string = 'My first angular2-google-maps project';
lat: number = 51.678418;
lng: number = 7.809007;}
I have been successful in implementing this same code using console(angular2 cli) but when I tried this using Visual Studio 2015 it is not displaying the maps. To be specific it only shows the content in the anchor tag in index.html.
plus I would to mention I am to able to run angular2 Quickstart on VS 2015.
If anyone can point out what I am doing wrong or have some suggestion it would be really helpful.
Solution to this was just downgrading the version of angular2-google-maps in project.json from 0.17.0 to 0.16.0.
I am trying to format a mysql datetime that looks like this: 2016-05-27 20:17:45 to an useable date format for angular2. After reading some comments how this could be done I created a custom pipe:
import {Pipe} from 'angular2/core';
#Pipe({
name: 'dateToIso'
})
export class DateToIso {
transform(value, args) {
let newValue = new Date(value).toISOString();
return newValue;
}
}
Then I imported the pipe to the page where to use it and defined it in the decorator to use it in the HTML file.
import {DateToIso} from '../../pipes/date-ToIso';
...
#Page({
templateUrl: 'build/pages/page1/page1.html'
pipes: [DateToIso]
})
When using the new created pipe in the HTML file: {{ post[2] | dateToIso}} I get the error:
Error: Uncaught (in promise): Template parse errors: The pipe
'dateToIso' could not be found
What am I doing wrong? Thanks to all :)
There is a missing comma after the template url
#Page({
templateUrl: 'build/pages/page1/page1.html', // << this comma here
pipes: [DateToIso]
})