We have an Angular Material raised button and we want the within it to be left aligned rather than centered.
Since Angular Materials buttons use a flex layout, we need to add the justify-content: flex-start; style.
[mat-raised-button] {
justify-content: flex-start;
}
We want to see how many milliseconds it takes to mutate a count index reference from one to a million.
Use console.time .
console.time('count performance');
for (let count = 0; count++; count <= 1000000) {
//Profile how long this takes
}
console.timeEnd('count performance');This will log.
count performance: 0.005126953125 ms…
We have an @Input property animationState and we want to log changes to the property.
Implement OnChanges to receive notifications of changes to the animationState input property.
export class HelloComponent implements OnChanges { ...Now we can log changes to the animationState property inside the ngOnChanges method.
ngOnChanges(changes…
We have created a test library within our Angular workspace.
ng g library testNow we wish to generate Compodoc documentation for the library.
Install Compodoc.
npm install -g @compodoc/compodocCreate tsconfig.doc.json in the root folder with the following contents.
{
"include": ["projects/test/src/**/*.ts"],
"exclude": ["projects/test/src/test.ts", "projects/test/src/**/*.spec.ts", "projects/test/src/app/file-to-exclude.ts"]
}Generate the…
We want the width and height of our div element to be whatever the width and height of the containing element is minus 1rem .
Use calc . The containing element will be a main element.
div {
height: calc(100% - 1rem);
width: calc(100% - 1rem);
background-color: aqua;
} 
We want a basic starting point for creating Leaflet demoes with Angular.
First add the dependencies:
leaflet@asymmetrik/ngx-leaflet@types/leafletWithin app.component.ts import leaflet .
import * as L from 'leaflet';Add the leaflet style sheet to the head of index.html .
<link
rel="stylesheet"
type="text/css"
href="./node_modules/leaflet/dist/leaflet.css"
/>Create a basic leaflet…
We have an array of customer objects and we want to log them in a table format.
Use console.table .
const customers = [
{ id: 1, name: 'Cookie Monster' },
{ id: 2, name: 'Swedish Chef' },
];
console.table(customers);If you open the console on the right of the…
We have a Customer property on our store instance that is always initialized and we want to skip the non null check in order to access the total function on each Customer instance.
const store:any = {};
if (store.customer) {
const total = store.customer.total());
} With the Typescript Optional Chaining…
We wish to fade in the Angular Router outlet.
Within styles.css or styles.scss add.
router-outlet + * {
display: block;
animation: outlet 1s;
}
@keyframes outlet {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Founder of Firefly Semantics Corporation
