Newbe Dev Stack

Answer : Based on the excellent answer of (from zero to hero), I want to clarify 2 points mentioned in comments: 1- You have to use ngModel not value 2- You have to give the control a name Full credit goes to him, I wanted to clarify this to any newcomer like me as it took me 2 hours to find out why it doesn't work You added required to the select's option , not the select . Do it like: <mat-form-field> <mat-select placeholder="Favorite food" name="select" [(ngModel)]="select" required> <mat-option *ngFor="let food of foods" [value]="food.value" > {{ food.viewValue }} </mat-option> </mat-select> </mat-form-field> DEMO

Answer : The way to change the selected option of a dropdown is to set the dropdown value and then dispatch a change event. You can use this answer as reference: Angular unit test select onChange spy on empty value In your case, you should do something like this: const select: HTMLSelectElement = fixture.debugElement.query(By.css('#dropdown')).nativeElement; select.value = select.options[3].value; // <-- select a new value select.dispatchEvent(new Event('change')); fixture.detectChanges(); You don't have to dispatch a change event. First you need to click on the trigger for your dropdown, i'm assuming it's your selectEl selectEl = fixture.debugElement.query(By.css('#dropdown')) . selectEl.click(); fixture.detectChanges(); After detectChanges your dropdown should be opened. Only after this will you be able to get your options from fixture, because before they where not present in your fixture. The only way I have been a...

Answer : The ControlContainer is a abstract class which is extended by the AbstractFormGroupDirective inside the ReactiveFormsModule . The error is thrown if you're using the ReactiveFormsModule and a <form> -element without a FormGroup bound to it via [formGroup]="myForm" . To fix this error you have to create a FormGroup and bind it to your form: <form class="container" [formGroup]="myForm" (ngSubmit)="update()"> Also make sure you have both the FormsModule and the ReactiveFormsModule added to your module imports. For Me its turns out that i imported just ReactiveFormsModule but not FormsModule. you need to import both. Turns out that the error had nothing to do with form not being bound to a formGroup , but me naming the receiving variable also formGroup . That confuses the heck out of Angular. Just renaming this variable solves the issue. That is okay now: <form class="container" (ngSubmit)=...

Answer : The grid tile component sets top padding dynamically on the element itself, so you need to use the !important modifier in your CSS to override it. HTML: <mat-grid-tile class="my-grid-tile"></mat-grid-tile> CSS: .my-grid-tile { padding-top: 24px !important; } Setting rowHeight of mat-grid-list works for me, the G. Tranter doesn't work because the mat-grid-list has a padding It's set dynamically too and cannot be setted with !important. <!-- 70px to prevent hide floatLabel in matInput --> <mat-grid-list cols="2" rowHeight="70px"> <mat-grid-tile> <!-- your controls --> </mat-grid-tile> </mat-grid-list> Ref: https://material.angular.io/components/grid-list/examples "@angular/material": "^6.4.3" "@angular/core": "^6.1.0" To get rid of the padding on top of mat grid tile restrict the height of the mat grid tile usi...

Answer : You need to add TesteventService under providers under imports in your app.module.ts providers: [ TesteventService ] Annotate your service class with - @Injectable({ providedIn: 'root' }) The service itself is a class that the CLI generated and that's decorated with @Injectable() . By default, this decorator has a providedIn property, which creates a provider for the service. In this case, providedIn: 'root' specifies that Angular should provide the service in the root injector.

Answer : You have to set the cols attribute of the mat-grid-list dynamically depending on the screen width. You'd have to decide on which width breakpoint will the mat-grid-list render the 1-column version. HTML: <mat-grid-list [cols]="breakpoint" rowHeight="2:0.5" (window:resize)="onResize($event)"> <mat-grid-tile>1</mat-grid-tile> <mat-grid-tile>2</mat-grid-tile> <mat-grid-tile>3</mat-grid-tile> <mat-grid-tile>4</mat-grid-tile> <mat-grid-tile>5</mat-grid-tile> <mat-grid-tile>6</mat-grid-tile> </mat-grid-list> TS: ngOnInit() { this.breakpoint = (window.innerWidth <= 400) ? 1 : 6; } onResize(event) { this.breakpoint = (event.target.innerWidth <= 400) ? 1 : 6; } Stackblitz demo here Hope this helps! I liked Altus answer, but I would like to have more breakpoints. So I've created a simple method with some breakpoints using F...