I'm trying to filter my products by categoryId value.
Products are listing in product-component.
I have a categoryFilter pipe that filters Products and returns list of Product.
This pipe requires categoryId but this value is in category-component scope. So my product-component cannot access it. What should I do to make it work?
product-component.html
<ul class="list-group">
<li class="list-group-item" *ngFor="let product of products |productFilter:filterText|categoryFilter:filterCategory">
<button (click)="addToCart(product)" class="btn btn-sm btn-primary float-right">
<i class="fa fa-plus"></i>
add to cart
</button>
<h5>{{product.productName | uppercase}} ({{product.categoryId}})</h5>
<p>{{product.quantityPerUnit}}</p>
<h6>{{product.unitPrice | currency:'TRY':'₺'}} (KDV DAHİL: {{product.unitPrice |vatAdded:8 | currency:'TRY':'₺'}})</h6>
</li>
category-component.html
<select class="form-control" [(ngModel)]="filterCategory">
<option value="" selected="selected">-- Choose Category --</option>
<option *ngFor="let category of categoryList" value="
{{category.categoryId}}">{{category.categoryName}}</option>
</select>
category-filter.pipe.ts
import { Pipe, PipeTransform } from '#angular/core';
import { Product } from '../product/product';
#Pipe({
name: 'categoryFilter'
})
export class CategoryFilterPipe implements PipeTransform {
transform(value: Product[], filterCategory?: any): Product[] {
return filterCategory?
value.filter((p:Product)=>p.categoryId==filterCategory):value;
}
}
You may share data between two components that cannot communicate via Events by using services.
You can inject a service in the two components and access the required field from there. Changing the value of service's field will reflect in both the components.
Please take a look at the below demo to get some sort of idea on how to implement.
https://stackblitz.com/edit/angular-prge5p?file=src%2Fapp%2Fproduct.component.ts
Change the value of appService.category from category-component and it will automatically reflect in the product-component.
Related
I have put in my whole day tried every method but to vain my efforts. I am learning React how to make work a delete functionality but then to vain .
A simple TO-DO list where the delete is not working. I dont know where i'm doing wrong.
Here are the js files: display and addList, which is parent to display. Using props the parent function is not being called.
display.js
class DisplayList extends Component{
delRow(en){
this.props.delItemRow(en);
}
render(){
return(
// console.log("check"+this.props.list),
<div>
<h4>DisplayList</h4>
<ul>
{this.props.list.map((item)=>(<li key={item}>{item} <button onClick={this.delRow.bind(this,item)}>D</button> </li>))}
</ul>
</div>
);} }
export default DisplayList;
addlist.js
class AdList extends Component{
constructor(props){
super(props);
this.state={value:'',disArrList:[]}
this.handleChange=this.handleChange.bind(this);
this.handleSubmit=this.handleSubmit.bind(this);
this.delItemRow=this.delItemRow.bind(this);
this.updateItemRow=this.updateItemRow.bind(this);
}
delItemRow(itemName)
{this.setState({disArrList:this.state.disArrList.filter(e1=>e1!==itemName)};
}
handleChange(e){
this.setState({value:e.target.value});
}
handleSubmit(e){
e.preventDefault();
//alert("submit"+this.state.value);
let mycolletion=this.state.disArrList.concat(this.state.value);
this.setState({disArrList:mycolletion});
}
render(){
return(
<div>
<div className="Todo">
<form onSubmit={this.handleSubmit}>
<input type="text" value={this.state.value} onChange={this.handleChange}/>
<input type="submit" value="Add" />
</form>
</div>
<div>
<DisplayList list={this.state.disArrList} removeItem={this.delItemRow} updateItem={this.updateItemRow}/>
</div>
</div>
);}}
export default AdList;
Thank you any help would be appreciated
The prop you are passing is called removeItem, so you have to change it in your snippet.
display.js
delRow(en){
this.props.removeItem(en);
}
render(){
return(
<div>
<ul>
{this.props.list.map((item)=>(<li key={item}>{item} <button onClick={this.delRow.bind(this,item)}>D</button> </li>))}
</ul>
</div>
);
}
In addlist.js you pass this.delItemRow in props as removeItem,
so in display.js you can access to delItem with this.props.removeItem
if you want to access it, with this.props.delItem in display.js simply you can change it into:
<DisplayList list={this.state.disArrList} delItemRow={this.delItemRow} updateItem={this.updateItemRow}/>
I have created a slider as in input field. I am not able to get its value in formGroup. I am stucked.
My code:
<form [formGroup]="Form" novalidate (ngSubmit)="BasicDetail(Form.value)>
<div class="col-md-8">
<div class="drags">
<input class="ex6" type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="5"/>
</div>
</div>
</form>
Help needed.
Make sure input is slider type, meaning range
type="range"
If you're going to create a submit form fucntion where you feed your form, then it's template-driven, so get rid of your formGroup property, (assuming this is what you want since you've shown no effort on the component.ts side)
Give your form a reference form
<form #form="ngForm" novalidate (ngSubmit)="BasicDetail(form.value)">
Create a button to submit
<button class="btn btn-primary"type="submit"> Submit </button>
Make sure to give your form input a name, and assign it ngModel
If you want also direct access, create a two-way binding, say with variable called rangeValue
[(ngModel)]="rangeValue"
Make sure you're actually using real range input types, I don't know where you got data-slider from
<form #form="ngForm" novalidate (ngSubmit)="BasicDetail(form.value)">
<div class="col-md-8">
<div class="drags">
<input class="ex6"
type="range"
min="0" max="10"
step="1"
name="someRange"
[(ngModel)]="rangeValue"
ngModel/>
</div>
</div>
<button class="btn btn-primary"type="submit"> Submit </button>
</form>
Inside your component.ts, declare variable and try to log it on submit
rangeValue = 5;
constructor( ) {}
ngOnInit() {
}
BasicDetail(form: any) {
console.log(this.rangeValue);
console.log(form.someRange);
}
#GetMapping("add")
public String addPart(Model model)
{
model.addAttribute("suppliers", this.partService.getSupplierNames());
model.addAttribute("part", new AddPartViewModel());
return "parts/parts-add";
}
This is my class
public class AddPartViewModel
{
private String name;
private double price;
private int quantity;
private String supplierName;
//PUBLIC GETERS AND SETTERS AND AN EMPTY CONSTRUCTOR
}
Thymeleaf syntax
<div class="form-group">
<label for="supplierName">Example select</label>
<select class="form-control" id="supplierName">
<option th:each="name : ${suppliers}" th:text="${name}" th:field="*{supplierName}"></option>
</select>
</div>
This is the only place where i get error on. The rest of the fragment works correctly, even if just remove the th:field tag the List<String> suppliers parces it self correctly in to the select box. Not i tried to put the th:field in the <select> tag as well, i.e
<select class="form-control" id="supplierName" th:field="*{supplierName}">
but still i get an error during parcing
th:field reffers to a form-backing bean's field, so make sure you've provided the proper bean in a <form> tag (using th:object attribute).
Regarding select: th:field should be provided in a <select> tag, like you've attempted to do. But you should provide also the proper th:value attribute in a <option> tag, so that any value could be assigned to the field.
Your form containing the problematic select should look like this:
<form th:object="${part}">
<div class="form-group">
<label for="supplierName">Example select</label>
<select class="form-control" th:field="*{supplierName}">
<option th:each="name : ${suppliers}" th:value="${name}" th:text="${name}"></option>
</select>
</div>
<!-- the rest of form's inputs and buttons -->
</form>
I'm trying to create an auto-complete list that appears as you type, but disappears when you click elsewhere on the document. How do I detect that a form input is focused using Angular 2. Angular 1 has ng-focus, but I don't think Angular 2 supports that anymore.
<input id="search-box" type="search" class="form-control [(ngModel)]=query (keyup)=filter()>
<div id="search-autocomplete" *ngIf="filteredList.length > 0">
<ul *ngFor="#item of filteredList" >
<li > <a (click)="select(item)">{{item}}</a> </li>
</ul>
</div>
By the way, I used this tutorial as guidance.
There are focus and blur events:
<input (blur)="onBlur()" (focus)="onFocus()">
For those using #angular/material, you can get a reference to the MatInput instance which implements MatFormFieldControl interface exposing a nice focused property.
<mat-form-field>
<input matInput #searchInput="matInput" type="text" />
<mat-icon matPrefix svgIcon="filter" [color]="searchInput.focused ? 'primary' : ''"></mat-icon>
</mat-form-field>
You could also use FocusMonitor from #angular/cdk.
https://material.angular.io/guide/creating-a-custom-form-field-control#focused
focused = false;
constructor(fb: FormBuilder, private fm: FocusMonitor, private elRef: ElementRef<HTMLElement>) {
...
fm.monitor(elRef.nativeElement, true).subscribe(origin => {
this.focused = !!origin;
this.stateChanges.next();
});
}
ngOnDestroy() {
...
this.fm.stopMonitoring(this.elRef.nativeElement);
}
You can use the ngControl directive to track change-state and validity of form fields.
<input type="text" ngControl="name" />
The NgControl directive updates the control with three classes that reflect the state.
State: Control has been visited
ng-touched
ng-untouched
State: Control's value has changed
ng-dirty
ng-pristine
State: Control's value is valid
ng- valid
ng- invalid
I have a template like
script type: "text/template", id: "list-template", '''
<div class="display">
<div id="list-name"><%= name %></div>
<span class="list-destroy"></span>
</div>
<div>
<ul id="ul-cards">
</ul>
</div>
<div class="edit">
<input class="list-input" type="text" value="<%= name %>" />
<input id="btnEdit" type="button" value="Save" class="primary wide js-add-list" />
<input id="hdnListId" type="hidden" value="<%= listId%>" />
</div>
<form class="add-list-card js-add-list-card clearfix">
<textarea placeholder="Add card" class="new-card"></textarea>
<input type="button" value="Add" class="primary js-add-card">
<a class="app-icon close-icon dark-hover cancel js-cancel-add-card" href="#" id="closeCard"></a>
</form>
'''
in this template i have <ul id="ul-cards"> element in which i want to render another template which display list inside this ul.
this template is :
script type: "text/template", id: "card-template", '''
<div>
<span class="card-name"><%= name %></span>
</div>
'''
is it possible or i have to do it in another way?
please help me if anyone have idea.
thanks in advace.
it is worked but still i have one problem in data display in
<ul id="ul-cards"> there sholud be 2 as per records in my database but it will display only 1 . data fetch properly but display only last data.
There are two ways to do this: the DOM way and the template way.
The DOM way involves adding your views using DOM methods: you have your ListView and your CardView; the ListView invokes individual CardViews that fill in the ListView's element.
The template way requires that you remember this: backbone's views are policy frameworks, not policy templates. Render doesn't have to render into the DOM. You can use render() to return a string, for example. If your event manager is on the ListView object only (possible; I've done this), then you can have ListView invoke "the resulting array of an array of CardView renders" and insert that directly into ListView's template. This is actually faster, as you only require the browser to analyze the entire ListView HTML blob once, when it's inserted into the innerHTML of the parent DOM object.