To remove .00 from the currency pipe you can use this pattern. See the digitsInfo section on CurrencyPipe for more information. {{ amount | currency : ‘USD’ : ‘symbol’ : ‘1.0-0′ }} If you don’t need the decimal you can use the number pipe. ${{amount | number}}
You can move the validation errors into a component and pass in the formControl.errors as an input property. That way all the validation messages can be re-used. Here is an example on StackBlitz. The code is using Angular Material but still should be handy even if you aren’t. validation-errors.component.ts import { Component, OnInit, Input, ChangeDetectionStrategy … Read more
You have two options here: 1. You can access parent resolve data via the child’s resolver by creating a child-specific resolver and accessing the route’s parent property. […module.ts | …component.ts] { path: ‘project/:projectId’, component: ProjectDetailComponent, resolve: { project: ProjectResolver } children: [ { path: ‘:projectId/edit’, component: EditProjectComponent, resolve: { edit: EditProjectResolve } } ] } … Read more
In my case I just removed the formControlName: <input type=”file” (change)=”onFileChange($event)”> And .ts: onFileChange(event) { const reader = new FileReader(); if (event.target.files && event.target.files.length) { const [file] = event.target.files; reader.readAsDataURL(file); reader.onload = () => { this.data.parentForm.patchValue({ tso: reader.result }); // need to run CD since file load runs outside of zone this.cd.markForCheck(); }; } }
You need to update all angular provided packages to their latest versions as follows: npm install [email protected] –save-dev npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest –save This should do all the necessary. Plus you could also update your angular cli that ships with angular 5 as standard version as … Read more
Why make things complex? Ideal way to do would be to add refrence of parent css file in child component as well. @Component({ selector: ‘child-app’, templateUrl: `./child.component.html`, styleUrls:[‘./parent/parent.component.css’, ‘./child.component.css’] }) export class ChildComponent { }
You can change the primary colour of the mat-slide-toggle with the below css in your component styles. /deep/ .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar { background-color: #49c5b6; } /deep/ .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { background-color: #49c5b6; } The above code is tested on angular 5+ version and which is working. Component styles normally apply only to the HTML in the component’s … Read more
You are trying to use a service that is not listed in providers of your AppModule. Add the service to a providers list to make it work.
That’s because you have to import a module to the module which contains the component declaration, not into the component itself: app.module.ts import { MaterialModule } from ‘./material.module’; @NgModule({ imports: [ // … MaterialModule ], declarations: [ MyCoolComponent, // … ] }) P.S. The correct way to use a material icon is to use the … Read more
You can use ngNoForm with your form to remove ngForm handling and to add plain javascript handler. you can use your code as follows: Html file. <form ngNoForm [formGroup]=”testGroup” [action]=’actionLink’ method=’POST’ #testForm> <input name=”Email” type=”hidden” [value]=’currentUserEmail’> </form> Ts File. @ViewChild(‘testForm’) testFormElement; public currentUserEmail: string = ”; public testGroup = this.formBuilder.group({ Email: ” }); constructor(formBuilder: FormBuilder) … Read more