DEV Community: CodeGirl

Animation for Angular *ngFor list

CodeGirl — Wed, 01 Nov 2023 10:30:30 +0000

If you want to create an animation for the ngFor list, where one item fades out when it is removed, and the remaining items below it slide up slowly, you can do so.
here's the code of the animation:

export const fadeOutAndShrinkAnimation: AnimationTriggerMetadata = trigger(
  "fadeOutAndShrinkAnimation",
  [
    transition(":leave", [
      sequence([
        query(".css-class-of-ngfor-list", [
          style({ opacity: 1 }),
          animate("600ms ease-in", style({ opacity: 0 })),
        ]),
        query(".css-class-of-ngfor-list", [
          animate("800ms ease-in", style({ height: 0 })),
        ]),
      ]),
    ]),
  ]
);

Here's a breakdown of the code:

fadeOutAndShrinkAnimation is a constant that holds the animation trigger definition.

trigger("fadeOutAndShrinkAnimation", [...]) is used to define the trigger. The string "fadeOutAndShrinkAnimation" is the trigger's name.

transition(":leave", [...]) is defining a transition for the trigger. The :leave is a special state that is applied when an element is leaving the view (e.g., being removed).

Inside the transition, there is a sequence of animation steps defined using sequence([...]).

query(".call-notification-item", [...]) is used to target elements with the class "call-notification-item" within the component. The query function is typically used to define animations for elements matching a particular selector.

Inside the first query, there is an animation sequence that includes:

style({ opacity: 1 }): This sets the initial opacity of the selected elements to 1.
animate("500ms ease-in", style({ opacity: 0 })): This animates the opacity of the selected elements to 0 over 500 milliseconds with an "ease-in" timing function.
In the second query, there is another animation sequence that includes:

animate("600ms ease-in", style({ height: 0 })): This animates the height of the selected elements to 0 over 600 milliseconds with an "ease-in" timing function.

Required in Typescript

CodeGirl — Wed, 14 Jun 2023 09:09:38 +0000

Today, we are going to explore one hidden gem of the typescript.  In some cases, properties of the type can be optional.

As in,
Type Props {
a?: number;
b?: string;
}

const obj: Props = { a: 5 };

const obj2: Required = { a: 5, b: 2 };

Here, for obj2, all the properties are mandatory when we add Required. If we fail to do so, we get the below error
Property 'b' is missing in type '{ a: number; }' but required in type 'Required'.

In the real time, the best example I could think of is:

Let's say you have a TypeScript interface called Book representing a book object.
The Book interface has some optional properties, but you want to create a function that accepts only books with all the properties being required. You can use Required to achieve this:

interface Book {
title?: string;
author?: string;
genre?: string;
}

function processBook(book: Required) {
// Process the book object
}

// Usage
const book1: Book = {
title: "The Catcher in the Rye",
author: "J.D. Salinger"
};

const book2: Required = {
title: "To Kill a Mockingbird",
author: "Harper Lee",
genre: "Fiction"
};

processBook(book1); // Compilation error: Missing required properties
processBook(book2); // Valid, as all the properties are required

In this example, we have the Book interface representing a book object. The properties title, author, and genre are all optional as denoted by the ? symbol. We then define a function called processBook that accepts a book object with all the properties being required.
When we try to pass book1 to processBook, TypeScript raises a compilation error because book1 is of type Book, and it might be missing some required properties. However, book2 is explicitly declared as Required, providing all the required properties, and thus it is a valid argument for the processBook function.

Skip Challenge-Codepen

CodeGirl — Wed, 24 Feb 2021 08:33:24 +0000

Simple birthday wish angularjs

CodeGirl — Wed, 16 Dec 2020 17:29:55 +0000

Here's a URL to Pen https://codepen.io/sahana_p_rao/live/pePyzZ