Angular 🇺🇦 - practical notes

📄 @Attribute Decorator in Angular

#angular #decorator #attribute

As you can see, when we trigger the change detection by emitting the click event, Angular is checking the value.
We can be more efficient in this case if we use the @Attribute decorator. With this change, Angular will evaluate it once and forget about it. As a general rule, I prefer the @Attribute() approach when the string is a fixed value that never changes.

import { Component, Attribute } from '@angular/core';

@Component({...})
export class ButtonComponent {

  constructor(
    @Attribute('type') 
    public type: ButtonType = 'primary'
  ) {
  }

}

✅ Article Link: https://netbasal.com/getting-to-know-the-attribute-decorator-in-angular-4f7c9fb61243

👍1

131 views05:59

Angular 🇺🇦 - practical notes

📄 Angular Micro Frontend: Module Federation in 6 steps

#angular #ModuleFederation

Module Federation is a powerful feature provided by Webpack that enables the implementation of Micro Frontends in Angular. It allows you to dynamically load and integrate remote Angular modules (Micro Frontends) into a main application shell.

Module Federation handles the dynamic loading and sharing of modules, including their dependencies, at runtime. It enables applications to share code and resources, reducing duplication and improving the overall performance and development experience.

✅ Article Link: https://sagarsnath.medium.com/angular-micro-frontend-module-federation-5bc5638c963f

👍2

135 views05:59

Angular 🇺🇦 - practical notes

📄 Angular Fallback Image

#angular #img #directive

✅ Article Link: https://medium.com/angular-man/angular-fallback-image-1f7fc3626e5f

119 views06:01

Angular 🇺🇦 - practical notes

📄 Angular 16 + Broadcast channel (Auth Fragments)

#angular #BroadcastChannel

✅ Article Link: https://techshareskk.medium.com/angular-16-broadcast-channel-4049a7f46019

👍1

123 views05:59

Angular 🇺🇦 - practical notes

📄 Why Class/Component inheritance in your Angular app might not be good

#angular #inheritance

✅ Article Link: https://medium.com/hackernoon/why-class-component-inheritance-in-your-angular-app-might-not-be-good-a5d88fdd855b

👍1🔥1

133 views05:59

Angular 🇺🇦 - practical notes

📄 Lesser-Known Tricks in HTML

#html

№1: Opening the Device Camera

<input type="file" capture="user" accept="image/*">
<input type="file" capture="environment" accept="video/*" />

№2: Automatic Website Refresh

<head>
    <meta http-equiv="refresh" content="10">
</head>

№3: Spellcheck Activation

<input type="text" spellcheck="true" lang="en">

№4: Preventing Translation

<p translate="no">Brand name</p>

№5: Automatic Download on Link Click

<a href="image.png" download>Download Image</a>

№6 Responsive Images with srcset

<img srcset="image.jpg 1x, image@2x.jpg 2x, image@3x.jpg3x" src="image.jpg" alt="Responsive Image">

👍2😱1

120 views05:59

Angular 🇺🇦 - practical notes

📄 How to use Cypress in 5 steps

#angular #cypress

Cypress is a desktop application. It supports multiple operating systems such as Windows, Linus, and iOS. Cypress is a tool that you can use to test a front-end application whatever the front-end framework you are using. E2E is a software testing method that simulates what the application should be able to do from the start to the end.

✅ Article Link: https://levelup.gitconnected.com/e2e-testing-with-cypress-angular-219eaa3926c

121 views05:59

About

Blog

Apps

Platform