I am using angular 6 application and i am trying to make a multiple select using input box without any third party plugin, jquery, datalist, select box and it is pure input box, typescript based.
HTML:
<div class="autocomplete">
<input name="suggestion" type="text" placeholder="User" (click)="suggest()" [formControl]="typeahead">
<div class="autocomplete-items" *ngIf="show">
<div *ngFor="let s of suggestions" (click)="selectSuggestion(s)">{{ s }}</div>
</div>
</div>
TS:
import { Component } from '#angular/core';
import { FormControl } from '#angular/forms';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
suggestions: string [] = [];
suggestion: string;
show: boolean;
typeahead: FormControl = new FormControl();
fieldHistory: string [] = [];
suggest() {
this.suggestions = this.users;
this.show = true;
}
selectSuggestion(s) {
this.suggestion = "";
this.fieldHistory.push(s)
for (let i = 0; i < this.fieldHistory.length; i++)
this.suggestion = this.suggestion + " " + this.fieldHistory[i];
this.typeahead.patchValue(this.suggestion);
this.show = false;
}
users = ['First User', 'Second User', 'Third User', 'Fourth User'];
}
Here i need to delete the selected values like the angular material chips, User is able to select multiple values but he also can delete the wrongly selected values.
How can i make a delete option for each individual items to delete the wrongly selected values inside the input box?
Stackblitz link with multi select option https://stackblitz.com/edit/angular-dndhgv
Any edit in the above link to make the multi select with delete option would also be much more appreciable..
Please try this.
component.ts
import { Component } from '#angular/core';
import { FormControl } from '#angular/forms';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
suggestions: string [] = [];
suggestion: string = '';
show: boolean;
typeahead: FormControl = new FormControl();
fieldHistory: string [] = [];
suggest() {
this.suggestions = this.users;
this.show = true;
}
selectSuggestion(s,status) {
this.suggestion = '';
if(status){
this.fieldHistory.push(s);
this.typeahead.patchValue(this.fieldHistory);
}else{
this.fieldHistory.forEach((element,index) => {
if(element == s){
this.fieldHistory.splice(index,1);
}
});
this.typeahead.patchValue(this.fieldHistory);
}
}
users = ['First User', 'Second User', 'Third User', 'Fourth User'];
}
Html
<div class="autocomplete">
<input name="suggestion" type="text" placeholder="User" (click)="suggest()" [formControl]="typeahead">
<div class="autocomplete-items" *ngFor="let s of suggestions">
<input type="checkbox" name='{{s}}' (click)="selectSuggestion(s,$event.target.checked)" />{{s}}
</div>
</div>
I'm not an Angular developer, but i tried to do solution.
Chosen phrases from suggested are storing in "chosen" variable. You can type something and divide it by "," to store it in "chosen" like in angular material chips.
Stackblitz
Maybe you should use a selected field for your users object, as following :
users = [
{
name: 'First User',
selected: false
},
{
name: 'Second User',
selected: false
},
{
name: 'Third User',
selected: false
},
{
name: 'Fourth User',
selected: false
}
]
The new html would be:
<div class="autocomplete">
<div (click)="showChoices()" style="border: solid 1px; display: flex">
<span *ngIf="!selectedUsers.length">Users</span>
<div *ngFor="let user of selectedUsers">
{{user.name}} <a style="cursor: pointer" (click)="unselectUser(user)">x</a>
</div>
</div>
<div class="autocomplete-items" *ngIf="show">
<div *ngFor="let user of users" [ngClass]="user.selected ? 'selected-suggestion' : ''" (click)="selectUser(user)">{{user.name}}</div>
</div>
</div>
And the .ts :
selectedUsers: { name: string, selected: boolean }[] = [];
show: boolean = false;
selectUser(user: { name: string, selected: boolean }) {
if (!user.selected) {
user.selected = true;
}
this.selectedUsers = this.users.filter((u) => u.selected);
console.log(this.selectedUsers)
}
unselectUser(user: { name: string, selected: boolean }) {
if (user.selected) {
user.selected = false;
}
this.selectedUsers = this.users.filter((u) => u.selected);
console.log(this.selectedUsers)
}
showChoices() {
if (this.selectedUsers.length) {
return;
}
this.show = !this.show;
}
Here is the working stackblitz.
Related
I am using a multi-select dropdown with bootstrap4 and jquery in an angular8 project. Based on the selection of values in the dropdown I get the output as
Here i have array of items so need to get only email in array of items.
["0: 'email1#gmail.com'", "1: 'email2#gmail.com'", "2: 'email3#gmail.com'"]
but I need the output to be [email1#gmail.com, email2#gmail.com, email3#gmail.com]
can anyone help me to do this?
TS:
$('#multiselectUser').multiselect({
buttonWidth: '400px'
}).on('change',(e)=>{
var selectedUser = $('#multiselectUser').val();
console.log(selectedUser,"selectedUser")
})
DEMO
Here it contains array of items and every selected value gets the index of the object and the emailId of that particular object.
HTML:
<select name="user" id="multiselectUser" multiple="multiple" >
<option *ngFor="let field of user" [value]="field.email" >
{{field.userName}}</option>
</select>
Please remove ngModel and try. You can check the working code here
app.component.html
<form >
<div class="form-group">
<label for="">Select User</label>
<select name="user" id="multiselectUser" multiple="multiple" (change)="selecteduser($event)">
<option *ngFor="let field of user" [value]="field.email" >
{{field.userName}}</option>
</select>
</div>
</form>
app.component.ts
import { Component } from "#angular/core";
import { FormBuilder, FormGroup, Validators } from "#angular/forms";
import { CurrencyPipe, DatePipe } from "#angular/common";
declare var $;
#Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
user: any = [
{
id: 1,
userName: "user",
email: "email1#gmail.com"
},
{ id: 2, userName: "user2", email: "email2#gmail.com" },
{ id: 3, userName: "uyuuy", email: "email3#gmail.com" },
{ id: 2, userName: "user2", email: "email4#gmail.com" }
];
public eoInfoForm: FormGroup;
selectedUsers: any;
constructor(private FB: FormBuilder) {}
ngOnInit() {
this.initEoForm();
setTimeout(() => {
$("#multiselectUser")
.multiselect({
buttonWidth: "400px"
})
.on("change", e => {
var selectedUser = $("#multiselectUser").val();
console.log(selectedUser, "selectedUser");
});
}, 100);
}
initEoForm() {
//Add
this.eoInfoForm = this.FB.group({
effectiveDate: ["", Validators.required]
});
}
selecteduser(event) {
alert(this.selectedUsers);
}
}
I am able to add it and select it all.
Using reactive forms module and angular material select module
TS:
data:String[]=[
{id:"1",name:'Boots'},
{id:"2",name:'Clogs'},
{id:"3",name:'Loafers'},
{id:"4",name:'Moccasins'},
{id:"5",name:'Sneakers'},
];
frmStepOne: FormGroup;
constructor(private _formBuilder: FormBuilder) {
this.frmStepOne = this._formBuilder.group({
selectedshoes:['']
});
}
ngOnInit() {
}
onSubmit(){
console.log(this.frmStepOne.value.selectedshoes);
}
HTML:
<form [formGroup]="frmStepOne" (ngSubmit)="onSubmit()">
<div>
<mat-form-field>
<mat-label>Select shoes</mat-label>
<mat-select formControlName="selectedshoes" multiple>
<mat-option *ngFor="let shoe of data" [value]="shoe.name">{{shoe.name}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
I have some checkboxes with parent-child structure whose values are coming from loop.Here when I click submit button I need to capture the selected/unselected value into below format(mentioned as commented output). When I click submit for preselected value is working fine, but if I remove checked from html(unselected on page load) and click submit that time it shows empty array.As per my requirement in project sometimes all checkboxes will be preselected,some times few selected/few unselected and some times all will be unselected based on condition and I need to capture selected/unselected value(same as output) on submit. Here is the code below
Demo - https://stackblitz.com/edit/angular-ar5apb?file=src%2Fapp%2Fapp.component.html
app.component.html
Checkbox -
<div class="col-md-3" id="leftNavBar">
<ul *ngFor="let item of nestedjson">
<li class="parentNav">{{item.name}}</li>
<li class="childData">
<ul>
<li *ngFor="let child of item.value; let i = index">{{child}}<span class="pull-right"><input checked type="checkbox" (change)="item.checked[i] = !item.checked[i]" ></span></li>
</ul>
</li>
</ul>
<div><button type="submit" (click)="getit()">submit</button></div>
</div>
app.component.ts
import { Component, OnInit } from "#angular/core";
#Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
data: any;
nestedjson: any;
message = "";
test: any;
constructor() {}
ngOnInit() {
this.nestedjson = [
{ name: "parent1", value: ["child11", "child12"] },
{ name: "parent2", value: ["child2"] },
{ name: "parent3", value: ["child3"] }
];
this.nestedjson.forEach(
v => (v.checked = Array(v.value.length).fill(true))
);
}
getit() {
var duplicatePushArray = [];
this.nestedjson.forEach(item => {
let checked = [];
item.checked.forEach((isCkecked, i) => {
if (isCkecked) {
checked.push(item.value[i]);
}
});
if (checked.length > 0) {
duplicatePushArray.push({
name: item.name,
value: checked
});
}
});
console.log("Final Array: ", duplicatePushArray);
/* output: [{"name":"parent1","value":["child11","child12"]},{"name":"parent2","value":["child2"]},{"name":"parent3","value":["child3"]}]*/
}
}
<input type="checkbox" [checked]="item.checked[i]" (change)="item.checked[i] = $event.target.checked">
or try template forms
<input type="checkbox" [name]="'checked_' + i" [(ngModel)]="item.checked[i]">
Make sure to import the forms module
Here is a reduce function that starts with an empty array, filters the values based on the checked array and the pushes a new object into the results if there are any checked ones with the checked results.
getit() {
var duplicatePushArray = this.nestedjson.reduce((results, item) => {
const checked = item.value.filter((value, index) => item.checked[index]);
if (checked.length) {
results.push({ name: item.name, value: checked });
}
return results;
}, []);
console.log("Final Array: ", duplicatePushArray);
}
Here is an update to your StackBlitz https://stackblitz.com/edit/angular-aasetj?file=src/app/app.component.ts
I'm having an issue trying to get Bootstrap 4 Checkboxes working with a select all and deselect all option in angular 6+. I can get it to work when I use the original code here:
http://www.angulartutorial.net/2017/04/select-all-deselect-all-checkbox.html
But the issue is Bootstrap uses a different event to click their checkboxes. Does anyone have a solution for this?
<div class="form-check">
<input class="form-check-input" type="checkbox" (change)="selectAll()">
<label class="form-check-label">
Select All
</label>
</div>
<div class="form-check" *ngFor="let n of names">
<input class="form-check-input" type="checkbox" value="{{n.name}}" [(ngModel)]="selectedNames" (change)="checkIfAllSelected()">
<label class="form-check-label">
{{n.name}}
</label>
</div>
And the TS:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-checkbox',
templateUrl: './checkbox.component.html',
styleUrls: ['./checkbox.component.scss']
})
export class CheckboxComponent implements OnInit {
title = 'Checkbox';
names: any;
selectedAll: any;
constructor() {
this.title = "Select all/Deselect all checkbox - Angular 2";
this.names = [
{ name: 'Prashobh', selected: false },
{ name: 'Abraham', selected: false },
{ name: 'Anil', selected: false },
{ name: 'Sam', selected: false },
{ name: 'Natasha', selected: false },
{ name: 'Marry', selected: false },
{ name: 'Zian', selected: false },
{ name: 'karan', selected: false },
]
}
selectAll() {
for (var i = 0; i < this.names.length; i++) {
this.names[i].selected = this.selectedAll;
}
}
checkIfAllSelected() {
this.selectedAll = this.names.every(function(item:any) {
return item.selected == true;
})
}
ngOnInit() {
}
}
this should do it
Here is a plnkr: https://next.plnkr.co/edit/ypGmwE32Xn1bgbqd?preview
HTML:
<div class="form-check">
<input class="form-check-input" type="checkbox" (change)="selectAll()" [checked]="selectedAll">
<label class="form-check-label">
Select All
</label>
</div>
<div class="form-check" *ngFor="let n of names">
<input class="form-check-input" type="checkbox" value="{{n.name}}" [(ngModel)]="n.selected" (change)="checkIfAllSelected()">
<label class="form-check-label">
{{n.name}}
</label>
</div>
TS:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-checkbox',
templateUrl: './checkbox.component.html',
styleUrls: ['./checkbox.component.scss']
})
export class CheckboxComponent implements OnInit {
title = 'Checkbox';
names: any;
selectedAll: any;
selectedNames: any;
constructor() {
this.title = "Select all/Deselect all checkbox - Angular 2";
this.names = [
{ name: 'Prashobh', selected: false },
{ name: 'Abraham', selected: false },
{ name: 'Anil', selected: false },
{ name: 'Sam', selected: false },
{ name: 'Natasha', selected: false },
{ name: 'Marry', selected: false },
{ name: 'Zian', selected: false },
{ name: 'karan', selected: false },
]
}
selectAll() {
this.selectedAll = !this.selectedAll;
for (var i = 0; i < this.names.length; i++) {
this.names[i].selected = this.selectedAll;
}
}
checkIfAllSelected() {
var totalSelected = 0;
for (var i = 0; i < this.names.length; i++) {
if(this.names[i].selected) totalSelected++;
}
this.selectedAll = totalSelected === this.names.length;
return true;
}
ngOnInit() {
}
}
I am not sure bootstrap has any special logic for event binding in checkbox. I suppose that is missing in your code. for binding see following snippet:
<form [formGroup]="form">
<div class="form-check" formArrayName="unitArr">
<input class="form-check-input" type="checkbox" [checked]="checkAllSelected()"
(click)="selectAll($event.target.checked)" id="select-all">
<label class="form-check-label" for="select-all">
Select All
</label>
</div>
<div class="form-check" *ngFor="let n of names; let i = index;" >
<input class="form-check-input" type="checkbox" value="{{n.name}}" [(ngModel)]="selectedNames" (change)="checkIfAllSelected()" [attr.id]="'check' + i">
<label class="form-check-label" [attr.for]="'check' + i">
{{n.name}}
</label>
</div>
</form>
checkAllSelected() {
return this.form.controls.unitArr.controls.every(x => x.value == true)
}
selectAll(isChecked) {
if isChecked
this.form.controls.unitArr.controls.map(x => x.patchValue(true))
else
this.form.controls.unitArr.controls.map(x => x.patchValue(false))
}
the "id" of input has to be mapped to "label" with "for". Not sure if you have any special requirement, but this is very basic HTML concept. Please give it a try, and see if your problem is solved.
Edit : Please note, I am not familiar with Angular6 concepts, however above code does work with Angular 2. You may check if any of the above points help you anyhow. All the best!
I have created a stackblitz app to demonstrate my question here: https://angular-ry1vc1.stackblitz.io/
I have formArray values on a select HTML list. Whenever a user changes the selection, it should display the selected value on the page. The problem is how can I display only the current selection and it should NOT overwrite the value selected previously. I wonder how to use the key to make the placeholder of the values unique. TIA
form.html
<form [formGroup]="heroForm" novalidate class="form">
<section formArrayName="league" class="col-md-12">
<h3>Heroes</h3>
<div class="form-inline" *ngFor="let h of heroForm.controls.league.controls; let i = index" [formGroupName]="i">
<label>Name</label>
<select (change)="onSelectingHero($event.target.value)">
<option *ngFor="let hero of heroes" [value]="hero.id" class="form-control">{{hero.name}}</option>
</select> <hr />
<div>
Hero detail: {{selectedHero.name}}
</div> <hr />
</div>
<button (click)="addMoreHeroes()" class="btn btn-sm btn-primary">Add more heroes</button>
</section>
</form>
component.ts
import { Component, OnInit } from '#angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup, Validators, NgForm } from '#angular/forms';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
heroes = [];
heroForm: FormGroup;
selectedHero;
constructor(
private fb: FormBuilder,
) {
this.heroForm = fb.group({
league: fb.array([
this.loadHeroes(),
this.loadHeroes(),
this.loadHeroes()
])
});
}
ngOnInit() {
this.listHeroes();
}
public addMoreHeroes() {
const control = this.heroForm.get('league') as FormArray;
control.push(this.loadHeroes());
}
public loadHeroes() {
return this.fb.group(
{
id: this.heroes[0],
name: '',
level: '',
skill: '',
}
);
}
public listHeroes() {
this.heroes = [
{
id: 1,
name: 'Superman'
},
{
id: 2,
name: 'Batman'
},
{
id: 3,
name: 'Aquaman'
},
{
id: 4,
name: 'Wonderwoman'
}
];
}
public onSelectingHero(heroId) {
this.heroes.forEach((hero) => {
if(hero.id === +heroId) {
this.selectedHero = hero;
}
});
}
}
If the aim of this is to show only the selected hero by array element instead of replace all the selected values then you can get some help using the array form elements.
A. The onSeletingHero and selectedHero are not necessary, I replaced that using the form value through formControlName attribute, in this example the id control is the select. The h.value.id is the way to get the selected value id.
<select formControlName="id">
<option *ngFor="let hero of heroes;" [value]="hero.id" class="form-control">{{hero.name}}</option>
</select> <hr />
<div>
Hero detail: {{getHeroById(h.value.id).name}}
</div> <hr />
</div>
B. In order to get the selected hero I added a getHeroById method.
getHeroById(id: number) {
return id ? this.heroes.find(x => x.id === +id) : {id: 0, name: ''};
}
Hope this information solve your question. Cheers
I am working on an app for my portfolio with Angular 2 where I have filtering functionality via checkboxes. These checkboxes apply name filtering to the lists of technologies I've used for each project I've worked on. In the app I also have a like functionality that allows you to indicate that you like a project. For this app I need to keep track of the number of likes that each project receives. In my code I would like to add a service to my project component that allows me to not loose the number of likes and filtered projects as I switch views with my router. In my code I have an array of Project objects, each take the following form- new Project( "Web Design Business Website", ["Wordpress", "Bootstrap","PHP","HTML5","CSS3"], 0 ) I am able to get the filtering and favoriting functionality to work if I don't use a service, but I need to use one for the aformentioned reasons and when I attempt to import in my service and use it, I am unable to see my template html on the screen and I get the following errors-
EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: TypeError: Cannot read property 'filter' of undefined
ERROR CONTEXT:
[object Object]
My Project component code is as follows:
import { ROUTER_DIRECTIVES, Routes } from '#angular/router';
import { Component, OnInit } from '#angular/core';
import { Project } from './project';
import { ProjectService } from './project.service';
#Component({
selector: 'my-app',
host: {class: 'dashboard'},
templateUrl: 'app/app.component.html',
providers: [ProjectService]
})
export class ProjectsComponent implements OnInit {
allProjects: Project[];
constructor(private projectService: ProjectService) {
this.updateSelectedList();
}
getProjects(){
this.allProjects = this.projectService.getProjects();
}
ngOnInit(){
this.getProjects();
}
title: string = 'Filter Projects by Technology';
/* all possible tech */
technologyList : Array<any> = [
{
name:"Javascript",
checked: true
}, {
name: "PHP",
checked: true
}, {
name: "HTML5",
checked: true
}, {
name: "CSS3",
checked: true
}, {
name: "AngularJS",
checked: true
}, {
name: "BackboneJS",
checked: true
}, {
name: "KnockoutJS",
checked: true
}, {
name: "Bootstrap",
checked: true
}, {
name: "Wordpress",
checked: true
},
{
name: "Photoshop",
checked: true
}
];
/* projects that match the selected tech */
matchedProjects: Array<any> = []
/* The checked items in the list */
selectedTechnology: Array<string> = [];
favUp(project): boolean {
project.favUp();
return false;
}
onInteractionEvent(event: Event) {
var item = this.technologyList.find(
(val) => val.name === event.target.value
);
item.checked = !item.checked;
this.updateSelectedList();
}
updateSelectedList() {
let checkedNames =
this.technologyList.filter( (val) => val.checked === true).map(n => n.name);
this.matchedProjects = this.allProjects.filter(project => {
return this.containsAny(project.technologies, checkedNames)
});
}
containsAny(arr1, arr2) {
for(var i in arr1) {
if(arr2.indexOf( arr1[i] ) > -1){
return true;
}
}
return false;
};
}
My project class is located in another file that I import and is as follows:
export class Project {
name: string;
technologies: Array<any>;
favs: number;
constructor(name: string, technologies: Array<any>, favs: number) {
this.name = name;
this.technologies = technologies;
this.favs = favs || 0;
}
favUp(): void {
this.favs += 1;
}
}
My array of project objects is located in another file and is as follows:
import { Project } from './project';
/* all the projects worked on */
export var ALLPROJECTS: Project[] = [
new Project( "Web Design Business Website", ["Wordpress", "Bootstrap","PHP","HTML5","CSS3"], 0 ),
new Project( "Vocab Immersion Trainer App", ["AngularJS","Javascript","Bootstrap","HTML5","CSS3"], 0)
];
My project service is located in another file that I import and is as follows:
import { Injectable } from '#angular/core';
import { ALLPROJECTS } from './all-projects';
#Injectable()
export class ProjectService {
getProjects() {
return ALLPROJECTS;
}
}
My template html for the project component is as follows:
<p>
<a class="btn btn-large btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
{{title}}
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-block">
<label *ngFor="let item of technologyList">
<input type="checkbox"
value="{{item.name}}"
[checked]="item.checked"
(change)="onInteractionEvent($event)">
{{ item.name }}
</label>
</div>
</div>
<h2>Featured Projects</h2>
<div *ngFor="let project of matchedProjects" class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-1 card">
<img src="http://placehold.it/350x150" class="card-img-top img-fluid img-rounded center-block" data-src="..." alt="Card image cap">
<div class="card-block text-xs-center">
<h4 class="card-title">Project Name: {{project.name}} </h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. This is alot of text. It adds length to the paragraph. It adds bulk. I had to do it. It was very necessary for this example</p>
<a class="btn btn-primary">See live site</a>
</div>
<p> {{ project.favs }} Likes <a href (click)="favUp(project)">Like</a></p>
</div>
<div class="col-sm-6 text-xs-center">
<h2 >Technology used</h2>
<p>{{project.technologies}}</p>
</div>
</div>
</div>
My previous project component code that works but doesn't retain data between views is as follows
import { ROUTER_DIRECTIVES, Routes } from '#angular/router';
import { Component } from '#angular/core';
/* import { Suggestion, SuggestionsComponent, SuggestionsView } from './suggestions.component'; */
export class Project {
name: string;
technologies: Array<any>;
favs: number;
constructor(name: string, technologies: Array<any>, favs: number) {
this.name = name;
this.technologies = technologies;
this.favs = favs || 0;
}
favUp(): void {
this.favs += 1;
}
}
#Component({
selector: 'my-app',
host: {class: 'dashboard'},
templateUrl: 'app/projects.component.html'
})
export class ProjectsComponent {
title: string = 'Filter Projects by Technology';
/* all possible tech */
technologyList : Array<any> = [
{
name:"Javascript",
checked: true
}, {
name: "PHP",
checked: true
}, {
name: "HTML5",
checked: true
}, {
name: "CSS3",
checked: true
}, {
name: "AngularJS",
checked: true
}, {
name: "BackboneJS",
checked: true
}, {
name: "KnockoutJS",
checked: true
}, {
name: "Bootstrap",
checked: true
}, {
name: "Wordpress",
checked: true
},
{
name: "Photoshop",
checked: true
}
];
/* all the projects worked on */
allProjects = [
new Project( "Web Design Business Website", ["Wordpress", "Bootstrap","PHP","HTML5","CSS3"], 0 ),
new Project( "Vocab Immersion Trainer App", ["AngularJS","Javascript","Bootstrap","HTML5","CSS3"], 0)
];
/* projects that match the selected tech */
matchedProjects: Array<any> = []
/* The checked items in the list */
selectedTechnology: Array<string> = [];
favUp(project): boolean {
project.favUp();
return false;
}
constructor() {
this.updateSelectedList();
}
onInteractionEvent(event: Event) {
var item = this.technologyList.find(
(val) => val.name === event.target.value
);
item.checked = !item.checked;
this.updateSelectedList();
}
updateSelectedList() {
let checkedNames =
this.technologyList.filter( (val) => val.checked === true).map(n => n.name);
this.matchedProjects = this.allProjects.filter(project => {
return this.containsAny(project.technologies, checkedNames)
});
}
containsAny(arr1, arr2) {
for(var i in arr1) {
if(arr2.indexOf( arr1[i] ) > -1){
return true;
}
}
return false;
};
}
Here is the github link to the working version of the project before the incorporation of the service: Portfolio Application link