angular6

I am using Angular 6 with Angular Material. I am trying to save a selected object or list of selected object from mat-chip and autocomplete. I am able to send string value to fruits[] array but can not able to send selected object in to fruits[] array. Please help me to find a solution. Thanks. My Demo Project Link: demo code on stackblitz You can try this solution. I have created a demo on Stackblitz . component.html <mat-form-field class="example-chip-list"> <mat-chip-list #chipList> <mat-chip *ngFor="let fruit of fruits;let indx=index;" [selectable]="selectable" [removable]="removable"

While going through the tutorial, i am coming across a strange scenario. while injecting the service in your component if you miss the access modifier it will give you error as given below, but adding it as private or public will run fine. Dont we have any default scope in Angular if we miss the access modifier ? export class UserDetailsComponent implements OnInit { name=""; lastName=""; constructor(userService : UserServiceService) { } ngOnInit() { } save(){ this.userService.saveUser(); } } Property 'userService' does not exist on type 'UserDetailsComponent'. If you prefix a constructor

Trying to upgrade to Angular 6 and got the below error when I referred the below in index.html: Refused to apply style from ' https://localhost:44394/~/assets/primengcss/themes/omega//theme.css ' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. Found the answer (at least worked for me), after some digging around: Looks like inAngular 6 we need to include any external CSS (like bootstrap, fontawesome, Primeng etc.,) to the angular.json as below: "styles": [ "./node_modules/bootstrap/dist/css/bootstrap.min.css", "./node_modules

I have been trying to work on Navbar with collapse menu and dropdown link using Bootstrap 4.1.1 and Angular 6 but somehow Navbar is not working at all. I can see elements correctly but they don't function as intended. I installed Bootstrap via Angular CLI using 'ng install bootstrap --save' and Bootstrap dependencies: 'ng install jquery --save' and 'ng install popper.js --save' I also included Bootstrap, jquery and popper.js in package.json and angular.json package.json: "dependencies": { "@angular/animations": "^6.0.0", "@angular/common": "^6.0.0", "@angular/compiler": "^6.0.0", "@angular

I am including form inputs, mat select with options and autocomplete field with options too into a matDialog box. The problem is that the options are showing behind the Dialog. I’ve already came across those solutions solution1 but did'nt solve this problem. here is my code: <mat-form-field class="wrapField"> <mat-select (selectionChange)="selectChange($event)" formControlName="product" placeholder="Alle Produkte"> <mat-option *ngFor="let product of products" value="{{product.id}}">{{product.nummer}}</mat-option> </mat-select> </mat-form-field> <mat-form-field class="wrapTime"> <input matInput

I rewriting library from NG4 -> NG6 (using angular-cli 6). This lib change dynamicli angular components so I using ComponentFactoryResolver and here I got stuck. When I add ComponentFactoryResolver to constructor: constructor( private componentFactoryResolver: ComponentFactoryResolver ) {} and build lib (with success) in target app (I add my lib in package.json from local file) I have this error: StaticInjectorError(AppModule)[MyLibComponent-> ComponentFactoryResolver]: StaticInjectorError(Platform: core)[MyLibComponent-> ComponentFactoryResolver]: NullInjectorError: No provider for

Working with Angular Material2 mat-selection-list , Able to identify whether current option is selected or non-selected[Boolean]. compnenent.html <mat-selection-list #shoes (selectionChange)="onSelection($event, shoes.selectedOptions)" > <mat-list-option *ngFor="let shoe of typesOfShoes" [value]='shoe'> {{shoe}} </mat-list-option> </mat-selection-list> component.ts export class ListSelectionExample { typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers']; onSelection(e, v){ console.error(e.option.selected,v); } } e.option.selected notifies whether current option is selected or

I'm using an Angular 5.x template, but I upgrade it to Angular 6 using https://update.angular.io/ guide. Now I have this error in my constructor Typescript Error: TS2314: Generic type 'ElementRef<T, any>' requires 2 type argument(s) My Code: import { Component, Input, Output, EventEmitter, ElementRef, HostListener } from '@angular/core'; @Component({ selector: 'sidebar', templateUrl: './sidebar.component.html' }) export class SidebarComponent { @HostListener('document:click', ['$event']) clickout(event) { if(!this.eRef.nativeElement.contains(event.target)) { this.hideMobileSidebar.emit(true);