Yes, the selector property of the @Component decorator is a CSS selector (or a subset of): selector: ‘.cool-button:not(a)’ Specifies a CSS selector that identifies this directive within a template. Supported selectors include element, [attribute], .class, and :not(). Does not support parent-child relationship selectors. Source: Angular Cheat Sheet / Directive Configuration, which @Component inherits. That way … Read more
An implementation cannot be declared in ambient contexts You most probably have your file named as foo.d.ts instead of foo.ts. That marks it as a declaration file (more on that https://basarat.gitbooks.io/typescript/content/docs/types/ambient/d.ts.html) and you cannot put logic in these as you are declaring what logic exists elsewhere.
md-snackbar provides a service to provide custom config. One the properties of config is extraClasses that allows to add CSS classes to the snack bar container (doc). extraClasses can be used with ::ng-deep to override the default CSS classes. Here’s an example: component.ts: Requires following import in the component: import {MdSnackBar, MdSnackBarConfig} from ‘@angular/material’; (providing … 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
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
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
Add the import in your module.ts file and add it to imports (if you use several module.ts files, add it in the one which is responsible for your component). import { MatTabsModule } from ‘@angular/material’; @NgModule({ imports: [ … MatTabsModule, … ], declarations: [ … ], providers: [] }) export class AppModule {}
For the people arriving here by searching: Install with npm: npm install roboto-fontface –save Add to styles in .angular-cli.json (apps[0].styles): “styles”: [ “styles.css”, “../node_modules/roboto-fontface/css/roboto/roboto-fontface.css” ], That’s all! Edit: since Angular 6 this file is called angular.json instead of angular-cli.json. Adding fonts still works the same way as before.