How do I create Mock data to plug in and test displays? Everytime, we want to view an HTML rendering, have to literally copy and paste data into Typescript file. Is there any toolset to conduct this?
Currently testing #Inputs, which are being displayed in HTML
In researching following options,
It is not an API, so cannot use InMemoryDbService from “angular-in-memory-web-api” https://www.techiediaries.com/angular-inmemory-web-api/
Also not database, so cannot apply json-server https://medium.com/letsboot/the-perfect-mock-backend-to-start-with-an-angular-application-3d751d16614f
What options exist to quickly swap Inputs? or do people have to copy and paste into each file, is this customary in Angular?
Typescript
export class CustomerView implements OnInit {
#Input() customer: Customer;
this.customer.name = "Joe";
this.customer.address = "123 Maple STreet";
this.customer.city = "Atlanta";
this.customer.state = "GA";
this.customer.zip= "30314";
this.customer.phone = "555-444-77777";
HTML
<div class = "row">
<div> {{customer.name}} </div>
<div> {{customer.address}} </div>
<div> {{customer.city}} </div>
<div> {{customer.state}} </div>
<div> {{customer.zip}} </div>
<div> {{customer.phone}} </div>
</div>
Display example plcture
You can create a json file or Object with the required fields.
customerDummy = {
name: "Joe",
address: "123 Maple STreet",
city: "Atlanta",
state: "GA",
zip: "30314",
phone: "555-444-77777",
}
Whenever you are you create a variable just assign the value. For eg
#Input() customer: Customer = customerDummy;
Related
How are you?
My situation is the next. I am passing an array with information to a Component to render with a map().
The name and title are perfect for me.
But I have trouble passing the SRC of the image. I've already tried all the ways I could think of, but nothing.
In the array I leave different paths that I have tried and nothing.
Thaanks!
MY COMPONENT:
import React from 'react';
import { TeampeopleData } from '../Components/TeampeopleData';
function Aboutus() {
return (
<div className='about'>
<div className="about-text">
<h1 className='about-text-title'>ABOUT US</h1>
<h2 className="about-text-big">We work until we see the invisible</h2>
<h2 className="about-text-small">Because it is our passion to serve our clients to the utmost satisfaction, we go against all odds to meet your expectations. We can’t promise you the world but here’s one thing we can assure you: We like to be as clear as we possibly can. We’ll hound you – one, two, three meetings – as many as it takes to get it right! We’re not perfectionists. We just want to make YOU the happiest.
</h2>
</div>
<div className="about-team">
<h2 className="about-team-title">Our Team</h2>
<div className="about-team-people">
{TeampeopleData.map((item)=>{
return(
<div className='people'>
<div className="people-img">
<img src={item.photo} alt="team-people" className="team-people-photo"/>
</div>
<h2 className="people-name">{item.name}</h2>
<p className="people-title">{item.title}</p>
</div>
)
})}
</div>
</div>
</div>
)
}
export default Aboutus
MY ARRAY
import people1 from '../img/people1.jpg';
export const TeampeopleData =[
{
photo: {people1},
name: 'Blas Garcia',
title: 'Founder'
},
{
photo: '/src/img/people1.jpg',
name: 'Patrick O’donnel',
title: 'Marketing'
},
{
photo: '../img/people1.jpg',
name: 'Olivia Wralikszowa',
title: 'Art Director'
}
]
enter image description here
Just remove the bracket around the people1 and it'll work fine.
{
photo: people1,
name: 'Blas Garcia',
title: 'Founder'
},
I have an array that gives teachers information. And I have a list component that lists these teachers. I want to a combobox and filter for this array.
this is my array
private _infoList: Array<AcademicPersonnelInfoModel> = [
{
id: '1',
title: 'Prof. Dr.',
firstName: 'Atakan',
lastName: 'bir'
},
{
id: '2',
title: 'Prof. Dr.',
firstName: 'Atakan',
lastName: 'iki'
},
{
id: '3',
title: 'Prof. Dr.',
firstName: 'Atakan',
lastName: 'uc'
},
];
this is my .html
<div class="col top-bar">
<div class="container">
<div class="tab-content">
<div class="tab-pane active">
<input type="text" ng-model=search.accountName>
<select ng-model="search.id" id="">
<option value=''>All</option>
<option value=1>1</option>
<option value=2>2</option>
</select>
<table ng-table="tableParams" class="table">
<tr ng-repeat="account in $data | filter:search.lastName | filter:search.id">
<td data-title="'id'">
{{account.account.accountId.id}}
</td>
<td data-title="'lastName'">
{{account.account.accountName}}
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
What should i do in typescript to be able to filter this list?
this is my ts file
export class AcademicPersonnelListComponent implements OnInit {
/** */
/** */
private _academicPersonelList: Array<AcademicPersonnelInfoModel> = [];
public get academicPersonelList(): Array<AcademicPersonnelInfoModel> {
return this._academicPersonelList;
}
I have an array that gives teachers information. And i have a list component that lists these teachers. I want to a combobox and filter for this array.
Angular 2+ build in pipes does not support filter pipe like AngularJS. You need to create a custom pipe for filtering to able to do so:
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({name: 'yourTeacherFilter'})
export class ExponentialStrengthPipe implements PipeTransform {
// The pipe's transform method take first Argurment is the data using that pipe( which is data before the '|' mark in the template), the others parameter is optional
transform(input: Array<AcademicPersonnelInfoModel>, lastname, id): number {
// Your logic of returned values go here
return input.filter( x => x.id === id && x.lastName.includes(lastname));
}
}
What the above code does is created a pipe that take an array as the main input along with two additionals paremeter lastname and id. The pipe do the logic you write inside and will return whatever is returned inside the transform() function.
Declare the newly created pipe into your app.module #NgModule() declarations array then you can apply that pipe to your template:
*ngFor= "let account of $data | yourTeacherFilter: search.lastName : search.id"
// The input following `yourTeacherFilter` should match the order
// of parameters you defined inside your custom pipe's transfomrm() function
This is just an simple example pipe for filtering data, you will need further logic to enhance the pipe in your app.
I need to capture data about the ngFor loop instance that is being rendered in the view, to then output it to a different view that renders extra information about the first information captured in the ngFor loop.
Example:
.ts file
user = [
{name: "Lucho", lastname: "Pai"},
{name: "Debora", lastname: "Melo"},
{name: "Elba", lastname: "Lazo"}
]
.html file
<ul *ngFor="let user of users">
<li>
Name: {{ user.name }}
Lastname: {{user.lastname }}
</li>
</ul>
That will render 3 , one for each user. I want to click in any of them and go to another view that shows me detail information about the lastname family. I.e., if I click in the "Elba" , I want to navigate to a full description of the "Lazo" family. So I need to capture that user information to navigate and to then make a request to my database to get the "Lazo" family information.
I've been thinking about this some days, but I cant grasp the concept that I need to understand to do it. It's to abstract for me. Between input(), output(), viewchild(), etc, I'm just tangling myself.
I really hope I explained myself,
Regards.
you can pass the value of selected family to the child component using #Input like this
component.ts
selectedFamily:any;
html
<ul *ngFor="let user of users">
<li (click)="selectedFamily=user;">
Name: {{ user.name }}
Lastname: {{user.lastname }}
</li>
</ul>
<detail-component *ngIf="selectedFamily" [value]="selectedFamily"></detail-component>
detail.component.ts
#Input() value:any;
UPDATE :- If the you want to navigate to another route to display the detail of the family you can use parameter to pass the unique id of the familiy
e.g
<ul *ngFor="let user of users">
<li (click)="onFamilySelect(user)">
Name: {{ user.name }}
Lastname: {{user.lastname }}
</li>
</ul>
component.ts
detailUrl:string="details/"// example route
onFamilySelect(user:any){
this.router.navigate(this.detailUrl+user.UserId)//assuming UserId is unique Id
}
}
on the new component
ngOnInit(){
let userId = this.route.snapshot.param['id'];
//and get the detail from db by userid
}
on route.module.ts
export const routes: Routes = [
{ path: 'details/:id', component: NewComponent }
];
dear Kaiser I think you can use the local storage as in this example
first.ts
//first component
//Inject Router in your constructor from
import { Router } from '#angular/router';
constructor(private router:Router) { }
navigateToOtherComponent(user){
localStorage.setItem("user",user);
this.router.navigate(['/second.ts']);
}
.html
//first component
// Add Event (Click) on the <li> tag or add a button aside with your content
<li (Click)="navigateToOtherComponent(user)">
Name: {{ user.name }}
Lastname: {{user.lastname }}
</li>
second.ts
//second component
constructor() {
const user = localStorage.getItem("user");
}
Assuming your detail component has a route configured and is called details. Hence use this answer only if you are routing to the details component. If you are displaying the details on the parent component itself, use the answer given by someone else below.
In your list.component.html
<ul *ngFor="let user of users">
<li>
Name: {{ user.name }}
Lastname: {{user.lastname }}
<button (click)="showDetails(user.name)">Details</button>
</li>
</ul>
In your list.component.ts
constructor(private router: Router){}
user = [
{name: "Lucho", lastname: "Pai"},
{name: "Debora", lastname: "Melo"},
{name: "Elba", lastname: "Lazo"}
]
showDetails(user){
this.router.navigate(['/details', { user: user}]);
}
In your details component this is how you receive the data:
ngOnInit() {
this.user$ = this.route.paramMap.pipe(
switchMap((params: ParamMap) => {
this.user = params.get('user');
})
);
//Do something with this.user
}
Hope this helps.
You can pass the user object in a function and run the navigation logic based on that specific user. For example in the html file you can bind and event to the ul:
<ul *ngFor="let user of users">
<li (click)="navigateBasedOnUser(user)">
Name: {{ user.name }}
Lastname: {{user.lastname }}
</li>
</ul>
And then in the component, you can define navigateBasedOnUser function to navigate. For example:
user = [
{name: "Lucho", lastname: "Pai"},
{name: "Debora", lastname: "Melo"},
{name: "Elba", lastname: "Lazo"}
]
navigateBasedOnUser(user){
// the user parametere here will have the user object of the `li` the user clicked on. you can access all the values of the user i.e. name, last name e.t.c.
this.router.navigate(["detailsComponent",user.name])
}
I have trouble getting the dropdown component to work. The dropdown seems to detect the items it should display because it widens the itemlist according to the number of items in the array. However the spaces are all blank.
This is the same dropdown box as from the example at https://www.primefaces.org/primeng/#/dropdown (the first one with header 'simple')
However with me it doesn't display anything. I copy pasted the exact same code, the only difference are the imports. When i go to the github repository i can see that they import
import {SelectItem} from '../../../components/common/api';
and
import {DropdownModule} from '../../../components/dropdown/dropdown';
Where I use
import {SelectItem} from 'primeng/api';
and
import {DropdownModule} from 'primeng/dropdown';
When i try to use the imports from github then it says it can find dropdownmodule and selectitem at those locations.
Heres my code:
interface City {
name: string,
code: string
}
export class Test implements OnInit {
cities1: City[];
selectedCity: City;
constructor() {
this.cities1 = [
{label:'Select City', value:null},
{label:'New York', value:{id:1, name: 'New York', code: 'NY'}},
{label:'Rome', value:{id:2, name: 'Rome', code: 'RM'}},
{label:'London', value:{id:3, name: 'London', code: 'LDN'}},
{label:'Istanbul', value:{id:4, name: 'Istanbul', code: 'IST'}},
{label:'Paris', value:{id:5, name: 'Paris', code: 'PRS'}}
];
}
}
heres the html
<p-dropdown [options]="cities1" [(ngModel)]="selectedCity" placeholder="Select a City" optionLabel="name" [showClear]="true"></p-dropdown>
<p>Selected City: {{selectedCity ? selectedCity.name : 'none'}}</p>
Anyone know how i can fix this?
Thank you
remove optionLabel and code will work -
<p-dropdown [options]="cities1" [(ngModel)]="selectedCity" placeholder="Select a City" [showClear]="true"></p-dropdown>
OptionLabel : Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options.
add optionLabel with the key name from the json array. The key you want to represent as label.
<p-dropdown optionLabel="label" [options]="cities1" [(ngModel)]="selectedCity" placeholder="Select a City" [showClear]="true"></p-dropdown>
Try this:
<p-dropdown
[options]="cities1"
[(ngModel)]="selectedCity"
placeholder="Select a City"
optionLabel="value.name"
[showClear]="true">
</p-dropdown>
Note this: optionLabel="value.name"
Trying to figure out how can i get the link to actually render as a link. Right now after i read this line of text from my Json file, react renders the hyperlink as literal text, it doesn't render it as a link.
someData.json
[{
"about": "John has a blog you can read here."
}]
someComponent.js
const Person = Component({
store: Store('/companies'),
render(){
var company = this.store.value()[this.props.companyId];
return (
<div id='ft-interviewee className="all-100"'>
<p className="section-heading bold padding-top-20 font-22">Person</p>
<div className="column-group horizontal-gutters">
<div className="all-10">
<div>{company.people.person.about}</div>
</div>
</div>
)
}
});
You can use dangerouslySetInnerHTML
<div dangerouslySetInnerHTML={ { __html: company.people.person.about } }></div>
Example
Another option and I think cheap to use is NPM React Plugin
https://www.npmjs.com/package/react-html-parser
I have used this and feeling good.