angular7

I'm trying to use Drag&Drop features relased with Angular Material 7. I separated my template in reusable pieces using ngTemplateOutlet and every option can be either a Thing ™ or a nested Thing ™ which have some more sub-Things ™. Nested Things ™ are displayed as an expansion panel. I want all the first-level Things ™ to be re-orderable as if thery were a list. ( Ok, ok, it's obvious that's a reorderable sidenav with normal and nested options, just pretend it's not so obvious ) This is the code I initially wrote. <div cdkDropList (cdkDropListDropped)="dropItem($event)" lockAxis="y"> <ng

I'm creating angular 7 app, and using mat-select for drop-down. Now i want add image within each item of the mat-select See the image below: Ensure you have images in the array which you're providing in the mat-option ; then, create an image tag and provide the image source to it. relevant HTML : <h4>Basic mat-select with images</h4> <mat-form-field> <mat-label>Favorite food</mat-label> <mat-select> <mat-option *ngFor="let food of foods" [value]="food.value"> <img src='{{food.img}}'> {{food.viewValue}} </mat-option> </mat-select> </mat-form-field> relevant TS : import { Component } from '

Angular is giving the error: popper.js in bootstrap 4 gives SyntaxError Unexpected token export I'm getting this error from browser console. Even I changed the popper.min.js location reference but no use.. node_modules/popper.js/dist/umd/popper.min.js node_modules/popper.js/dist/ems/popper.min.js Angular.json "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.min.js", "node_modules/jquery/dist/jquery.slim.min.js", "node_modules/popper.js/dist/popper.min.js" ] Bootstrap.min.js is depend on the popper.min.js , change the order as follows, "scripts": [ "node_modules/jquery/dist/jquery.slim

In angular 7, trying to use angular material mat-dialog-content. While importing in app.module.ts it gives the following error: TypeError: Object(...) is not a function like: Uncaught TypeError: Object(...) is not a function at platform.es5.js:102. package.json { "name": "image-cropp", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^7.2.15", "@angular/cdk": "^8.0.1", "@angular/common": "~7.2.0", "@angular/compiler": "~7.2.0", "@angular/core

I am working on Angular application using bootstrap 4. I need help related to scss adding in my angular application. My question is: Is the way of adding bootstrap 4 scss same in Angular 6 and Angular 7 or not? i.e. npm install bootstrap --save And, open angular.json file and add bootstrap file path to the styles section. Like: "styles": [ "src/styles.css", "node_modules/bootstrap/dist/css/bootstrap.min.css" ], Is the above way is same for both the version of angular. You need to do the following: Add Bootstrap to package.json (which is done with npm install bootstrap --save) Add Bootstrap to