I have used the Angular CLI to set up this project so the standard folder layout holds. I am trying to practice reading in a JSON file from src/app/assets/items.json and use it to display these items in the html.
items.json:
{
"results": [
"Item 1",
"Item 2",
]
}
app.service.ts in src/app/:
import { Injectable } from '#angular/core';
import { Http, Response, Headers, RequestOptions } from '#angular/http';
import { Observable } from 'rxjs/Rx';
// Import RxJs required methods
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
#Injectable()
export class AppService {
private greetUrl = 'api/Hello';
// Resolve HTTP using the constructor
constructor(private _http: Http) { }
findJSON(): Observable<any> {
return this._http.get('assets/items.json').map((response: Response) => {
return response.json();
});
}
sayHello(): Observable<any> {
return this._http.get(this.greetUrl).map((response: Response) => {
return response.text();
});
}
}
and app.component.ts in src/app:
import { Component, OnInit } from '#angular/core';
import { Http, Response } from '#angular/http';
import { AppService } from './app.service';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
greetings = '';
itemsjson : string;
constructor(private _appService: AppService) { }
ngOnInit(): void {
this._appService.findJSON()
.subscribe(
result => {
this.itemsjson = result;
}
);
}
}
and app.component.html in src/app/:
<html lang="en">
<link rel="stylesheet" href="https://bootswatch.com/cerulean/bootstrap.min.css">
<head>
<meta charset="utf-8">
<title>Yik-Yak Clone</title>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Yik-Yak Clone
</div>
</div>
</div>
<!-- Containers
================================================== -->
<div class = "container">
<div class="row">
<div class="col-lg-12">
<div class="bs-component">
<div class="jumbotron">
<h1>{{itemsjson}}</h1>
</div>
</div>
</div>
</div>
</div>
<!-- Containers
================================================== -->
<div class = "container">
<div class="row">
<div class="col-lg-12">
<div class="bs-component">
<div class="jumbotron">
<h1>{{itemsjson}}</h1>
</div>
</div>
</div>
</div>
</div>
<!--
================================================== -->
<div class = "container">
<div class="row">
<div class="col-lg-12">
<div class="bs-component">
<div class="jumbotron">
<h1>{{itemsjson}}</h1>
</div>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<div class="navbar-head">
<div class = "col-sm-3"></div>
<div class="col-sm-6">
<div class="form-group">
<input class="form-control input-lg" type="text" id="inputLarge">
</div>
</div>
<div class = "navbar-brand">
<div class="col-sm-2">
<div class="form-group">
<button type="submit" class="btn btn-primary">greetings</button>
</div>
</div>
</div>
<div class = "col-sm-1"></div>
</div>
</div>
</nav>
</body>
</html>
Every example online and similar question online seems to imply that this is all correct.
You want to be looping through your results property returned by your json.
<div class ="container" *ngFor="let item of itemsjson?.results">
<div class="row">
<div class="col-lg-12">
<div class="bs-component">
<div class="jumbotron">
<h1>{{item}}</h1>
</div>
</div>
</div>
</div>
</div>
We also are using the safe navigation operator (?) because itemsjson is not initially defined itemsjson?.results
There is nowhere you are using itemsjson in your HTML, probably you need
<div class="jumbotron">
<h1>{{itemsjson | json }}</h1>
</div>
First, check your itemsjson on console.log and just pass it in your template. If you want to read your data in loop use - *ngFor = 'let data of itemsjson;let i = index' and pass {{data}}.
Related
I have created two components home where I will show minute details about a Employee, and view where I will show complete details about a Employee.
My home.component.html is as follows:
<header>Welcome Home</header>
<br>
<div class="container panel panel-default" *ngFor="let employee of employeeList;">
<div class="panel-heading">
<h3 class="panel-title">{{employee.firstName}} {{employee.lastName}}</h3>
</div>
<div class="panel-body">
<div class="col-xs-10">
<div class="row vertical-align">
<div class="col-xs-8 offset-md-2">
<div class="row">
<div class="col-xs-6">
First Name
</div>
<div class="col-xs-6">
{{employee.firstName}}
</div>
</div>
<div class="row">
<div class="col-xs-6">
Last Name
</div>
<div class="col-xs-6">
: {{employee.lastName}}
</div>
</div>
<div class="row">
<div class="col-xs-6">
Gender
</div>
<div class="col-xs-6">
: {{employee.gender}}
</div>
</div>
<div class="row">
<div class="col-xs-6">
Department
</div>
<div class="col-xs-6">
: {{employee.department}}
</div>
</div>
<div>
<button class="btn btn-primary" (click)="viewEmployee(employee.id)">
View
</button>
<button class="btn btn-primary" (click)="editEmployee(employee.id)">
Edit
</button>
</div>
</div>
</div>
</div>
</div>
</div>
My home.component.ts is as follows:
import { Component, NgModule, OnInit } from '#angular/core';
import { Router, RouterModule, Routes } from '#angular/router';
import employees from './../employeeDetails/employees.json';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor(private router: Router) {
}
public employeeList: {
id: number;
firstName: string;
lastName: string;
gender: string;
age: number;
email?: string;
phoneNumber?: number;
department: string;
}[] = employees;
ngOnInit(): void {
}
viewEmployee(id): any {
this.router.navigateByUrl('/view');
}
editEmployee(i): any {
this.router.navigateByUrl('/edit');
}
}
When I click on button available in home component, it has to carry the index or id of the employee. and show only specific details about that employee. Presently, when I click view button, it is displaying all the details of all employees.
My view.component.html is as follows:
<header>View Page</header>
<br>
<div class="container panel panel-default" *ngFor="let employee of employeeList;">
<div class="panel-heading">
<h3 class="panel-title">{{employee.firstName}} {{employee.lastName}}</h3>
</div>
<div class="panel-body">
<div class="col-xs-10">
<div class="row vertical-align">
<div class="col-xs-8 offset-md-2">
<div class="row">
<div class="col-xs-6">
First Name
</div>
<div class="col-xs-6">
: {{employee.firstName}}
</div>
</div>
<div class="row">
<div class="col-xs-6">
Last Name
</div>
<div class="col-xs-6">
: {{employee.lastName}}
</div>
</div>
<div class="row">
<div class="col-xs-6">
Gender
</div>
<div class="col-xs-6">
: {{employee.gender}}
</div>
</div>
<div class="row">
<div class="col-xs-6">
Age
</div>
<div class="col-xs-6">
: {{employee.age}}
</div>
</div>
<div class="row">
<div class="col-xs-6">
Email
</div>
<div class="col-xs-6">
: {{employee.email}}
</div>
</div>
<div class="row">
<div class="col-xs-6">
Phone Number
</div>
<div class="col-xs-6">
: {{employee.phoneNumber}}
</div>
</div>
<div class="row">
<div class="col-xs-6">
Department
</div>
<div class="col-xs-6">
: {{employee.department}}
</div>
</div>
<div>
<button class="btn btn-primary" (click)="editEmployee()">Edit</button>
</div>
</div>
</div>
</div>
</div>
</div>
My view.comonent.ts is as follows:
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
import employees from './../employeeDetails/employees.json';
#Component({
selector: 'app-view',
templateUrl: './view.component.html',
styleUrls: ['./view.component.css']
})
export class ViewComponent implements OnInit {
constructor(private router: Router) { }
public employeeList: {
id: number;
firstName: string;
lastName: string;
gender: string;
age: number;
email?: string;
phoneNumber?: number;
department: string;
}[] = employees;
ngOnInit(): void {
}
editEmployee(): any {
this.router.navigateByUrl('/edit');
}
}
In total I have 3 employees, which I have specified in employee.json file. Which is as follows:
[
{
"id": 1,
"firstName": "Abhi",
"lastName": "A B",
"gender": "male",
"age": 25,
"email": "Abhi#gmail.com",
"phoneNumber": 8888888888,
"department": "IT"
},
{
"id": 1,
"firstName": "Amogh",
"lastName": "A M",
"gender": "male",
"age": 25,
"email": "Amogh#gmail.com",
"phoneNumber": 8888888888,
"department": "IT"
},
{
"id": 1,
"firstName": "Harsha",
"lastName": "H A",
"gender": "male",
"age": 25,
"email": "Harsha#gmail.com",
"phoneNumber": 8888888888,
"department": "IT"
}
]
Please help.
You may pass the id like this:
this.router.navigateByUrl(`/view/${id}`);
And then on the view component get it like this:
constructor(private router: Router, private route: ActivatedRoute) { }
///
ngOnInit() {
this.route.params.subscribe((params) => {
const employeeId = params.id;
});
}
This is a code sandbox that might help you: https://codesandbox.io/s/flamboyant-rubin-x2fuc?file=/src/app/view/view.component.ts
Important points:
The json file has id 1 for all employees, I changed this on the codesandbox for it to work well.
The view component html should not have an ngFor since you want only one employee on this view.
*ngFor="let employee of employeeList;
I removed this on the sandbox from the view.component.html
This is the core of the answer. Adds a local variable to store the employee and then assigns it filtering from the json using the id from params.
employee;
ngOnInit(): void {
this.route.params.subscribe((params) => {
const employeeId = params.id;
this.employee = employees.filter((e) => e.id === +employeeId)[0];
});
}
Just follow along with this video: link
it's explaining exactly what you want to achieve with angular router.
EDIT:
You can visit this demo too: link, and notive the relationship between hero-list component and hero-detail component, both of them inside heroes folder.
for example, in the demo app, if you click on heroes you navigate to hero-list component, and after that if you click on Dr Nice for example:
you navigate to hero-detail component, but with data corresponding to Dr Nice:
I'd like to display formated HTML using type script function in an angular component, I wanted it to display question from diferent type, I tried this,
import {Component, OnInit} from '#angular/core';
import {TP, Question, Qtype} from "../tp";
import * as Exercice from '../assets/Exercice.json';
#Component({
selector: 'app-tp',
templateUrl: './tp.component.html',
styleUrls: ['./tp.component.css']
})
export class TpComponent implements OnInit {
constructor() {
}
ngOnInit(): void {
}
displayQCM(question: Question) {
return `
<div>
<hr class="w-100">
<h3>Question n°${question.number} ${question.questionType}</h3>
<p>${question.questionContent}</p>
...
QCM question element
...
</div>
`;
}
displayTrueOrFalse(question: Question) {
return `
<div>
<hr class="w-100">
<h3>Question n°${question.number} ${question.questionType}</h3>
<p>${question.questionContent}</p>
...
true or false question element
...
</div>
`;
}
displayQuestion(question: Question) {
return `
<div>
<hr class="w-100">
<h3>Question n°${question.number} ${question.questionType}</p>
<p>${question.questionContent}</p>
...
normal question element
...
</div>
`;
}
}
<div class="row justify-content-center">
<div class="col-12 col-lg-6">
<h2>Questions</h2>
{{displayQCM()}}
{{displayQuestion()}}
{{displayTrueOrFalse()}}
</div>
</div>
but the HTML display only as plain text writing fully the code on the page, do you know how to fix this ?
EDIT: edited code to be more in the context, the question comes from a json file and there's 3 type of them, I created a function to translate them into Question and depending on there type I want 3 way to display them in 3 different forms, each type as a long HTML development and are displayed with different tag and element
You need to use [innerHTML] property in your html file
<div class="row justify-content-center">
<div class="col-12 col-lg-6">
<h2>Questions</h2>
<div [innerHTML]="displayQCM()"></div>
<div [innerHTML]="displayQuestion()"></div>
<div [innerHTML]="displayTrueOrFalse()"></div>
</div>
</div>
If you are just trying to inject dynamic content you need to sanitize your html string and then use innerHtml. From your question Im not sure what the goal is and there must be a better way without injecting Html but you would need to clarify the goal.
questions: Array<SafeHtml> = new Array<SafeHtml>();
myJson: Array<string> = []; //I dont know where its coming from
constructor(private sanitizer: DomSanitizer) {
}
ngOnInit(): void {
myJson.forEach((question) => {
this.questions.push(this.sanitizer.sanitize(question));
})
}
<div class="row justify-content-center">
<div class="col-12 col-lg-6">
<h2>Questions</h2>
<div *ngFor="let q of questions" [innerHtml]="q"></div>
</div>
</div>
Why you don't use ngFor to list all questions?
HTML
<div class="row justify-content-center">
<div class="col-12 col-lg-6">
<h2>Questions</h2>
<div *ngFor="let question of allQuestions">
<hr class="w-100">
<h3>Question n°{{question.number}} {{question.questionType}}</h3>
<p>{{question.questionContent}}</p>
</div>
</div>
</div>
And allQuestions is your question array
You can add conditions depends on question type with *ngIf:
<p *ngIf="question.questionType=== 'normal'"></p>
or you can use ng-template:
<ng-template [ngIf]="question.questionType === 'normal'">Your HTML code for normal question</ng-template>
<ng-template [ngIf]="question.questionType === 'trueFalse'">Your HTML code for trueFalse question</ng-template>
Exemple
TS :
displayQCM : boolean;
displayQuestion : boolean;
displayTrueOrFalse : boolean;
HTML
<div class="row justify-content-center">
<div class="col-12 col-lg-6">
<h2>Questions</h2>
<div *ngIf="displayQCM">...</div>
<div *ngIf="displayQuestion">...</div>
<div *ngIf="displayTrueOrFalse">...</div>
</div>
</div>
I created a simple calculator app. I have two component: Calculator and Result and use Angular router between them. Now I want to do this : When I perform a calculation in Calculation component, the result will be passed and displayed in another Result component. Can you show me some ways for this ?
calculator.component.ts
#Component({
selector: 'app-calculator',
templateUrl: './calculator.component.html',
styleUrls: ['./calculator.component.css']
})
export class CalculatorComponent implements OnInit {
public number1: number;
public number2: number;
public result: number;
constructor() {
}
sum() {
this.result = this.number1 + this.number2;
}
diff() {
this.result = this.number1 - this.number2;
}
mult() {
this.result = this.number1 * this.number2;
}
divi() {
this.result = this.number1 / this.number2;
}
ngOnInit(): void {
}
}
calculator.component.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="card">
<div class="card-header">CALCULATOR</div>
<div class="card-body">
<div class="form-group value">
<div class="form-group row">
<label class="col-md-2 col-form-label">Value 1:</label>
<div class="col-md-10 input-1">
<input [(ngModel)]='number1' class="form-control inp" type="number" name="num1">
</div>
</div>
<div class="form-group row">
<label class="col-md-2 col-form-label">Value 2:</label>
<div class="col-md-10 input-2">
<input [(ngModel)]='number2' class="form-control inp" type="number" name="num2">
</div>
</div>
</div>
<div class="buttons">
<br>
<button class="butt" (click)='sum()'> + </button>
<button class="butt" (click)='diff()'> - </button>
<button class="butt" (click)='mult()'> x </button>
<button class="butt" (click)='divi()'> / </button>
<br><br><br>
</div>
{{result}}
</div>
</div>
</body>
</html>
app-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { CalculatorComponent } from './calculator/calculator.component';
import { ResultComponent } from './result/result.component';
const appRoutes: Routes = [
{ path: 'calculator', component: CalculatorComponent },
{ path: 'result', component: ResultComponent }
];
#NgModule({
imports: [RouterModule.forRoot(appRoutes,
{ enableTracing: true } // <-- debugging purposes only
)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.html
<h1>Angular Router</h1>
<nav>
<a routerLink="/calculator" routerLinkActive="active">Calculator</a><br>
<a routerLink="/result" routerLinkActive="active">Result</a>
</nav>
<router-outlet></router-outlet>
data.service.ts
import { Injectable } from '#angular/core';
#Injectable({
providedIn: 'root'
})
export class DataService {
constructor() { }
}
There are multiple ways to do this,
The simplest way can be to use state while navigating to result route from calculator route.
this.router.navigate(['result'], { state: { result } });
This will put your result in window.history.state object, which then you can access from result component.
ngOnInit() {
this.resultValue = window.history.state.result;
}
Demo
2. You can also store the result in shared service and then access that variable from result component. Inject the service wherever required and store the retrieve data from it.
#Injectable()
export class SharedServiceService {
storeValue: number = 0;
constructor() { }
}
app.component.html code
<div class="container">
<div class="row" id="ads">
<div class="col-xs-4">
<app-card *ngFor="let car of cars"
[carNotifyBadge]="car.carNotifyBadge"
[carNotifyYear]="car.carNotifyYear"
[carCondition]="car.carCondition"
[carPrice]="car.carPrice"
[carUsageinKM]="car.carUsageinKM"
[carName]="car.carName"
[imgSource]="car.imgSource"
>
</app-card>
</div>
</div>
</div>
app.component.ts code
import { Component ,Input} from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title:string = "Angular-App"
cars = [
{....},{....},{....}
]
}
card.component.html
<div class="card rounded">
<div class="card-image">
<span class="card-notify-badge">{{carNotifyBadge}}</span>
<span class="card-notify-year">{{carNotifyYear}}</span>
<img class="img-fluid" [src]="imgSource" alt="Alternate Text" />
</div>
<div class="card-image-overlay m-auto">
<span class="card-detail-badge">{{carCondition}}</span>
<span class="card-detail-badge">{{carPrice}}</span>
<span class="card-detail-badge">{{carUsageinKM}}</span>
</div>
<div class="card-body text-center">
<div class="ad-title m-auto">
<h5>{{carName}}</h5>
</div>
<a class="ad-btn" href="#">View</a>
</div>
</div>
card.component.ts
import { Component, OnInit, Input } from '#angular/core';
#Component({
selector: 'app-card',
templateUrl: './card.component.html',
styleUrls: ['./card.component.css']
})
export class CardComponent implements OnInit {
constructor() { }
#Input() carNotifyBadge = '';
#Input() carUsageinKM = '';
#Input() carName = '';
#Input() carNoticarNotifyYearfyBadge = '';
#Input() imgSource = '';
#Input() carCondition = '';
#Input() carPrice = '';
#Input() carNotifyYear = '';
ngOnInit(): void {
}
}
Since in app.component.html I have used grid system of bootstrap and using structural directives ngFor I am dynamically adding elements to DOM. I expect the cols to be side by side, whereas I am getting it below each other as shown in the image.
How to display cols side by side as per bootstrap behaviour ?
Make sure bootstrap CSS is loaded in the application if not, follow these steps.
Steps to include Bootstrap in Application
Pass only car item to the child component, all properties within car object yu will be able to access in the child component.
<div class="container">
<div class="row" id="ads">
<div class="col-xs-6 col-md-4" *ngFor="let car of cars">
<app-card [car]="car"></app-card>
</div>
</div>
</div>
In the child component, receive the car object inputs from the parent component.
#Input car;
make sure, that bootstrap is included in your bundled.css file.
has '#ads' any styles which override bootstraps behavior?
helpful link for install bootstrap using-bootstrap-with-angular
I had similar problem. I use a bootstrap and a commercial theme built on it. I tried to present list of records in bootstrap grid.
I have main app-component which presents the web page. Then I have card-list component which presents grid list within app-component.
When I typed:
styleUrls: [
'./credential-card.component.css',
'../../assets/css/bootstrap.min.css',
'../../assets/css/style.css']
Cards were properly styled, but grid didn't work.
When I removed styles
styleUrls: [
'./credential-card.component.css']
I lost styling but grid worked fine.
What fixed the problem was to implement another component card-detail and invoke it from card-list. I removed bootstrap CSS from card-list, and added to card-detail.
Finally, I have something like this in card-list component:
<section class="pricing-wrapper pt-70 pb-100">
<div class="container">
<div class="row justify-content-center">
<div *ngFor="let item of credentials" class="col-lg-4 col-md-6 col-sm-8">
<card-detail [shortName]="item.payload.doc.data().shortName" [priceDescription]="item.payload.doc.data().priceDescription"></card-detail>
</div>
</div>
</div>
And this in card-detail:
<div class="pricing-style-5 mt-30">
<div class="pricing-header">
<div class="pricing d-flex align-items-center flex-wrap">
<h3 class="heading-3 font-weight-400 title">{{shortName}}</h3>
<span class="price">{{priceDescription}}</span>
</div>
</div>
</div>
enter image description here
html code
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header" style="text-align: center;">
<span class="close">×</span>
<h2>Register Account</h2>
</div>
<div class="modal-body">
<div class="signup-body">
<div class="su-body" style="background-color:#3B5998;">
Employer
</div>
<div class="su-body" style="background-color:#3B5998;">
Candidate
</div>
</div>
<div class="signup-body">
<div class="su-body" style="background-color:#3B5998;">
Login with Faceboo
</div>
<div class="su-body" style="background-color:#3B5998;">
Login With Google
</div>
</div>
<div class="signup-body">
<div class="su-body" style="background-color:#3B5998;">
Login With Linkedin
</div>
<div class="su-body" style="background-color:#3B5998;">
Login With Twitter
</div>
</div>
</div>
<div class="modal-footer">
<div class="signup-body">
<!-- <button>Sign up</button> -->
<div class="su-body" style="background-color:#3B5998;">
Sign up
</div>
</div>
<p>Already have ab account</p>Login
</div>
</div>
</div>
I want to create a registration page has given below in angular 6. But my question is when user can register two ways (either employer or candidate ) so how can i send Api particular field data. please help me.
Please check below solution might be it can help you to observe Registration Type:
Registered Event in Html:
<div class="signup-body">
<div class="su-body" style="background-color:#3B5998;">
<a href="#" target="_blank" (onclick)="changeReg('Employer')" >Employer</a>
</div>
<div class="su-body" style="background-color:#3B5998;">
<a href="#" target="_blank" (onclick)="changeReg('Candidate')" >Candidate</a>
</div>
</div>
Create a data sharing service
import { Injectable } from '#angular/core';
import { BehaviorSubject } from 'rxjs';
#Injectable()
export class DataService {
private regSource = new BehaviorSubject('Employer'); //Default registration type
currentReg = this.regSource.asObservable();
constructor() { }
changeRegType(regTyp: string) {
this.regSource.next(regTyp)
}
}
Set New Registration type within Supplied Html component:
import { Component, OnInit } from '#angular/core';
import { DataService } from "../data.service";
#Component({
selector: 'app-registration',
styleUrls: ['./registration-selection.component.css']
})
export class RegistrationSelectionComponent implements OnInit {
constructor(private data: DataService) { }
changeReg(regType:String) {
this.data.changeRegType(regType);
}
}
Get default/new registration type in signup component:
import { Component, OnInit } from '#angular/core';
import { DataService } from "../data.service";
#Component({
selector: 'app-signup',
template: `
{{message}}
`,
styleUrls: ['./signup.component.css']
})
export class SignUpCmponent implements OnInit {
regType:string;
constructor(private data: DataService) { }
ngOnInit() {
this.data.currentReg.subscribe(reg => this.regType = reg)
}
}