Ole Ersoy – Medium

1 hour ago

Setting the Theme When Adding Angular Material

Scenario When we run ng add @angular/material we want to set the theme to purple-green . Approach ng add @angular/material --theme=purple-green

1 min read

Setting the Theme When Adding Angular Material

1 min read

Dec 2

Angular Components With Default Display Styling Overflow the Container

Scenario You’ve just created a new Angular component and when you place it inside a component with padding your Angular component view overflows the padding over the external container. Approach This happens because the default display CSS style value for the Angular component is inline . Set the display to block or some other display value like flex or grid and this will fix the issue. Demo The demo lays out the default Angular Stackblitz component as follows.

1 min read

Angular Components With Default Display Styling Overflow the Container

1 min read

Nov 21

Creating an Angular Project for a Specific Semantic Version

Scenario We just upgraded global Angular CLI to version 17.0.0 . However we need to create a project with the semantic Angular version being 16.2.x . Approach One way to do this is to prefix the ng command with npx -p @angular/cli@16.2.x like this. npx -p @angular/cli@16.2.x ng new angular-project If you…

1 min read

Creating an Angular Project for a Specific Semantic Version

1 min read

Nov 6

Using a CSS Grid for Even Row Element Spacing

Scenario We have 3 div elements contained in a CSS Grid and each div takes up the entire width of the container. We want the div to be spaced out by 36px without using margins. This is the markup. <div class="GridRowSpacer"> <div class="div1">div1</div> <div class="div2">div2</div> <div class="div3">div3</div> </div> Approach To achieve this we will configure our grid as follows.

1 min read

Using a CSS Grid for Even Row Element Spacing

1 min read

Nov 6

Host Encapsulated Styling in Angular Components

Scenario We want to style the h1 element in the Stackblitz Angular Baseline Demo using host encapsulated styling (Prefixing the style rule selector with the element name) like this: styles: [`my-app h1 { color: orange; } `], Approach This is fairly straight forward. If we try the above rule by simply adding it as declared above, it will work as long as we we turn of the components ViewEncapsulation like this it works.

1 min read

Host Encapsulated Styling in Angular Components

1 min read

Oct 31

Using Number Typed Properties on Angular Components

Scenario We have a value input property on our component of type number and we want to set it using @Input() semantics. Approach Use Angular’s new numberAttribute transform. @Input({ transform: numberAttribute }) value: number = 0; Demo <hello value="22"></hello> <hello value></hello> <hello value="-5"></hello> <hello></hello> Angular Number Input Transform Demo - StackBlitz An angular-cli project based on @angular/animations, @angular/common, @angular/compiler, @angular/core, @angular/forms…stackblitz.com

1 min read

Using Number Typed Properties on Angular Components

1 min read

Oct 30

Generating HTML Boilerplate in VSCode

Scenario We want the following boilerplate generated in VSCode. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html> Approach Create a new index.html document. Type ! followed by a tab and voila the code is generated.

1 min read

1 min read

Oct 26

Creating a Simple Mobile First Responsive Layout with CSS Grid

Scenario On mobile screens we want to have two div elements laid out in a column that each have responsive (flexible) widths and are 200px in height. They should be separated by a 20px gap. On screens with a width greater than 960px we want the div elements laid out in…

2 min read

Creating a Simple Mobile First Responsive Layout with CSS Grid

2 min read

Oct 16

Returning Values from Javascript Arrow Functions

The obvious way is just to write the function like this: const f = () => { const result = { v: 'value' }; return result; }; However we could shorten this by just using parenthesis around the function body like this: const f2 = () => ({ v: 'value', }); Demo

JavaScript

1 min read

JavaScript

1 min read

Oct 5

Binding Angular Route Parameters to Component Inputs

Scenario We have this TodoComponent and we want to initalize the @Input properties using values provided via the Route path.. import { Component, Input, OnInit } from '@angular/core'; import { CommonModule } from '@angular/common'; @Component({ selector: 'app-todo', standalone: true, imports: [CommonModule], template: `<h1>Todo with Router Parameters</h1>…

Programming

2 min read

Binding Angular Route Parameters to Component Inputs

Programming

2 min read