2 min read.
I've gathered some tips and tricks regarding front-end development during the creation of many projects and i've put them all here in case somebody will benefit fom them. This article contains general web-dev tips, Angular 2+ snippets but not ES6ish javascript (since the internet is covered with these articles).
On your css when you apply colors to different elements with Hex values (e.g. #FFFFFF), you can add 2 more aditional characters in the end, to specify the opacity of the color.
Here's an example
.foo {
color: #FFFFFF50
}
In this example, the foo
div gets a white color with 50% opacity.
Instead of putting space between elements with margin like below.
<div>
<p style="margin-left: 10px;">foo</p>
</div>
You can give space between elements's textNodes with the
keyword like this
<div>
<p> foo</p>
</div>
CAREFUL 👉
can be only applied to textNodes of elements and not actual elements, textNodes are considered the non HTML children of the corresponding element.
When you console.log an object and want to copy it to the clipboard do these steps.
copy(temp1)
Some people use this type of ngClass 👇
<div [ngClass]="active ? 'activated' : '' "></div>
You can do this instead
<div [ngClass]="{'activated': active}"></div>
Why?
When using ngOnChanges, you should know that there is a firstChange
property (https://angular.io/api/core/SimpleChange) that tells you whether the change was before or after ngOnInit. This results in less logic on the constructor and more logic on ngOnInit which is a recomended way to develop applications in Angular.
I'm planning to make this list bigger and bigger over time, so any suggestion or tip would be appreciated and posted along with the corresponding credit to the author. Feel free to leave a comment if this helped you or you liked it!