You can achieve what you need with CSS variables. In your style sheet you can set the background image like this: .featured-image:after { content: ”; background-image: var(–featured-image); } After that you can programmatically set this variable on the same element or higher up in the DOM tree: <div class=”featured-image” [ngStyle]=”{‘–featured-image’: featuredImage}”> More about CSS variables … Read more
Angular uses webpack and all type script files are listed under it. To select your target typescript file, Chrome’s Developer tool (F12). Go to Source tab, Select Chrome “webpack://”->”src/app” -> your typescript file. Or in older version of chrome follow this path “webpack://”->”.”->”src/app” -> your typescript file ( See the image file). Or Ctrl+P to … Read more
A component can be declared in one and only one module. If you try to declare it in more than one modules you’ll get this error Error: Type … is part of the declarations of 2 (or more) modules: The solution to this problem is pretty simple. If you need to use a component in … Read more
useExisting – create refrence to service example here useClass – create new instance of service example here
Problem is you’re trying to get a reference to video element using its id. You need to use template reference variable (#) instead: <div class=”video”> <video controls (click)=”toggleVideo()” #videoPlayer> <source src=”https://stackoverflow.com/questions/40360174/{{videoSource}}” type=”video/mp4″ /> Browser not supported </video> </div> Read more about template reference variable here. Edit: Also, in your toggleVideo(event: any) function, you need to … Read more
There still isn’t much documentation about the Angular Overlay CDK. Most of what I’ve learned has come from their Github repo. Global Position Strategy This would be a global positioning strategy. The overlay you are creating would be positioned directly on the screen, not in relation to an element. This is good for a dialog … 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 { }
This is such an annoying error, thought I’d include another subtle cause to look for in your spec. In my case I specified providers instead of the correct value of provide as below TestBed.configureTestingModule({ providers: [{provider: ApplicationActions, useClass: ActionMock}] rather than offer useful information like “no ‘provide’ key specified” it simply reports Failed: Invalid provider … Read more
This is what eventually worked for me – this.addEditUserForm = this.builder.group({ firstName: [”, Validators.required], lastName: [”, Validators.required], title: [”, Validators.required], email: [”, Validators.required], password: [”, Validators.required], confirmPass: [”, Validators.required] },{validator: this.checkIfMatchingPasswords(‘password’, ‘confirmPass’)}); checkIfMatchingPasswords(passwordKey: string, passwordConfirmationKey: string) { return (group: FormGroup) => { let passwordInput = group.controls[passwordKey], passwordConfirmationInput = group.controls[passwordConfirmationKey]; if (passwordInput.value !== passwordConfirmationInput.value) { return … Read more
You can use ::ng-deep selector to achieve what you want, this answer has some info on it. How I did it: CSS ::ng-deep .mat-progress-bar-fill::after { background-color: #1E457C; } ::ng-deep .mat-progress-bar-buffer { background: #E4E8EB; } ::ng-deep .mat-progress-bar { border-radius: 2px; } HTML <mat-progress-bar mode=”determinate” value=”{{progress}}”></mat-progress-bar> And the result is this: EDIT: I found a way to … Read more