I have created a search-name.component.ts which is not working in another
component but If I put use it directly like " <input type="text"
placeholder="Search by Name" name="filterText" [(ngModel)]="filterText">"
then it is working fine. Could anyone please help me on this.
*search-name.component.ts - *
import {Component, Input} from "@angular/core";
import {Pipe, PipeTransform} from '@angular/core';
@Component({
selector: 'searchbyName',
template: `<div class="search">
<input type="text" placeholder="Search by Name" name="filterText"
[(ngModel)]="filterText">
</div>`,
})
export class searchbyName{
}
*project-details.component.html - *
<div class="row">
<div class="searchbox">
<searchbyName></searchbyName>
<!-- <input type="text" placeholder="Search by Name"
name="filterText" [(ngModel)]="filterText"> -->
</div>
<h3>Project List</h3>
<h3>{{errorMsg}}</h3>
<!--| filter: filterText-->
<ul class="col-sm-4 col-md-4 col-xs-12" *ngFor="let project of projects
| filter: filterText" (click)="onSelect(project)"
[class.selected]="isSelected(project)">
<li>
{{project.name}}<br> Pledge: {{project.pledge}}<br> Backers:
{{project.Backers}}<br> No. Of days to go: {{project.NoOfDaystoGo}}
</li>
</ul>
</div>
*Project-details.components.ts -*
import { Component, OnInit } from "@angular/core";
import { ProjectService } from "./project.service";
import { Router, Params, ActivatedRoute } from "@angular/router";
@Component({
selector: 'project-list',
templateUrl: './app/project-details.component.html',
})
export class ProjectDetailsComponent implements OnInit {
private projects:any = [];
public selectedId:any;
errorMsg: string;
public ChildData:string;
constructor(private _projectService: ProjectService, private
router:Router, private route: ActivatedRoute) { }
ngOnInit() {
//service code to get data from the JSON file....
this._projectService.getProjects()
.subscribe(resProjectData => this.projects = resProjectData,
resProjectError => this.errorMsg = resProjectError
);
//get the selected project Id from the project Item component....
this.route.params.subscribe((params: Params) => {
let id = parseInt(params['id']);
this.selectedId = id;
//alert(id);
})
}
onSelect(project:any){
this.router.navigate(['/project-item', project.id]);
}
//Match if the projectId equals to the selected id add class to the
element.
isSelected(project:any){
return project.id === this.selectedId;
}
}
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
