Best way to store/display data in angular - json

So I have a FAQ page which I have developed in angular and I have hardcoded all the data in a html file .I just wanted to know is there a better way of displaying the data like storing it in a XML/JSON/TXT file and read the file and display it or store the XML/JSON/TXT file in angular and read form it**(if storing it where to store it)**.
.Browsed for a few articles didn't find anything helpful ,any guidance will be appreciated. I am new to angular so just looking for some advice ,thanks in advance.

If your data is static I recommend storing it in a JSON file inside your angular application under the assets folder.
You can then use Angular HttpClient to retrieve the content of the file.
In this example, the file is called 'data.json' and is stored under the 'assets' folder:
import { HttpClient } from '#angular/common/http';
#Component({
selector: 'my-component',
templateUrl: './my-component.html',
styleUrls: ['./my-component.css']
})
export class MyComponent implements OnInit {
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get('/assets/data.json').subscribe().then(data => console.log(data));
}
}
You can find more information here.

Related

error TS2740 on Angular when trying to load .json

I am a novice in Angular/Typescript and I am trying to build a dynamic page with the champion_info.json in order to display all the data in a list. I tried to upload the data from my json file but I have this error and I don't know what to do about it. I watched every possible youtube video about this subject but I still can't find an answer.
How can I simply load my data from the .json file and use it in order to display it in a list ?
This is my hero.component.ts :
import { Component, OnInit } from '#angular/core';
import * as Heroes from "src/hero_json/champion_info.json";
interface heroes1 {
title: String;
id: Number;
name: String;
key:String;
}
#Component({
selector: 'app-hero',
templateUrl: './hero.component.html',
styleUrls: ['./hero.component.css']
})
export class HeroComponent implements OnInit {
liste !: heroes1 = Heroes;
constructor() {
}
ngOnInit(): void {
}
}
This is the error
And this is where you can find the champion_info.json file: https://www.kaggle.com/datasnaek/league-of-legends?select=champion_info.json
Probably the problem is you need to add
declare module "*.json" {
const value: any;
export default value;
}
in a file in the app folder as
json-typings.d.ts
Anyways here is the repo I create to answer your question with basic and complete way to build this app you can clone a try to u
repor basic app
First, as you have indicated above you need to get .data from the JSON object, in your component class:
heroes = json_data.data;
In your template use the angular keyvalue pipe to parse and display data where you have a list of objects rather than an array.
<div *ngFor="let hero of heroes | keyvalue">
{{ hero.value.title }}
{{ hero.value.name }}
// etc
</div>

how to load html with errors in angular

I am using angular 6. I have a dynamically created HTML file. Which may have errors like:
self closing tags
closing tags missing
mathematical equations
custom attributes
errors like Template parse errors:
There is no directive with "exportAs" set to "aff" (
Is there any way to skip all errors and simply load HTML content in angular?
Try like this. I haven't test this code.
import { Pipe, PipeTransform } from '#angular/core';
import { DomSanitizer } from '#angular/platform-browser';
#Pipe({ name: 'keepHtml', pure: false })
export class EscapeHtmlPipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {
}
transform(content) {
return this.sanitizer.bypassSecurityTrustHtml(content);
}
}
Ref link
I would first encourage to use nglint in your code .
From my viewpoint, it is a very bad idea to generate HTML from angular, and I seriously think it will not work at all ! That's is angular job. You have to generate dynamic components . Then, angular will render these components in html.
Use an html validator after generating the html page, that will permit to fix it.

How to load jsp page as template in component in angular 6

I want to load the external jsp page content as template in my component in angular 6 application.
#Component({
selector: 'app-conrequest',
templateUrl:'mydomain.com:port/utils/registerUser.jsp',
styleUrls: ['./conrequest.component.css']
})
In the above code, I have mentioned the jsp page url, which I want to load as a template.
Please help me on this.
Thanks,
Suresh
First of all whichever external link you are using it should "return" something.
If there is no information in return it will always gives you an error.
Lets begin your answer...
Step 1- First you need to import HttpClient and Map
import { HttpClient } from '#angular/common/http';
import 'rxjs/add/operator/map';
Step 2- and your #Component decorator should look like this
#Component({
selector: 'my-template',
template: `<div [innerHtml]="myTemplate">
</div> `})
Step 3- in your class you can import your external template like...
export class TestComponent {
private myTemplate: any = '';
constructor(http: HttpClient) {
http.get('www.abc.com/index.html', {responseType: 'text'}).subscribe(data => this.myTemplate = data);
}
}
Step 4 - Also import httpClient in RootModule
imports: [
...
...
HttpClientModule
],
That's it. Try with yours.
Thanks
Sunil Sain

bypasssecuritytrust from DomSanitizer not working (Angular 2)

My problem is the following, I get as a response from a service an entire HTML page that I should display back t the user. Now this is an issue for Angular since it thinks I might be a victim of cross site scripting if I do that. The source I get the HTML from is trusted so I wanted to white list it or bypass the sanitizer in some way and render the view to the user.
The problem I ran into is that the file I get also contains 'style' and 'script' tags for manipulating the dom, and no matter how I place the bypass function calls something gets caught and the entire thing doesn't render properly. Is there any way I could maybe separate the HTML file clear it and then put it back together or something else?
Try this:
import { DomSanitizer } from '#angular/platform-browser';
constructor(private sanitizer: DomSanitizer) { }
//where you want to use the unsafe html
const sanitizedHtml = this.sanitizer.bypassSecurityTrustResourceUrl(html);
What you can do, but goes against the Angular principle, is to append the html markup to the innerhtml of your component or the DOM using ElementRef from
#angular/core.
Sample appcomponent:
import { Component, ElementRef } from '#angular/core';
#Component({
selector: 'my-app',
template: ``,
})
export class AppComponent {
private htmlTemplate = `
<div>Loading template</div>
<script type="text/javascript">
console.log('loaded');
</script>
`;
constructor(private elementRef: ElementRef) { }
ngAfterViewInit() {
let elem: Element = this.elementRef.nativeElement;
elem.innerHTML = this.htmlTemplate;
}
}

Error while getting data via JSON using Http in angular2

My .ts file has code :
/// <reference path="../../../../node_modules/angular2/typings/tsd.d.ts" />
import {Component,View,CORE_DIRECTIVES,} from 'angular2/angular2'
// import {provide} from 'angular2/angular2'
import {Http} from 'angular2/http';
#Component({
selector: 'renew',
templateUrl: 'static/components/library/renew/renew.html',
styleUrls: ['static/app.css'],
directives: [CORE_DIRECTIVES]
})
export class Renew{
http;
constructor( http:Http){ };
}
i have one .Json file having data in the form of arrays. i want to get data from json and want to show in the template. but whenever i use http in the constructor it returns error like following:
Cannot resolve all parameters for Renew(?). Make sure they all have valid type or annotations.
I have tried official angular2 website's plnkr for demo link here. but this is also not working for me(it seems that plnkr is for the alpha 37).
i am using angular2 44 alpha. and trying to get data in the child component.
am i doing something wrong here ?