Rajat Malik’s Post

Angular Custom Events with @𝐎𝐮𝐭𝐩𝐮𝐭 𝐃𝐞𝐜𝐨𝐫𝐚𝐭𝐨𝐫. While the @Input decorator allows parent components to pass data to child components, the @𝐎𝐮𝐭𝐩𝐮𝐭 decorator enables child components to send data or events back to the parent. By using @Output, you can ensure that actions taken within a child component, like button clicks or form submissions, can trigger events in the parent component. This allows for a two-way communication flow between components, making application more interactive and responsive. 𝐄𝐱𝐚𝐦𝐩𝐥𝐞 Imagine you have a ProductListComponent that displays a list of products, and each product is managed by a ProductCardComponent. Using @Output, the ProductCardComponent can emit an event when a product is selected, allowing the ProductListComponent to update the UI or trigger further actions based on the user’s selection. @Output enables components to communicate effectively, ensuring that user interactions within a child component can impact the overall application behavior. 

Check out my latest post on Implementing Dark and Light Mode in Angular

New post on Angular Patterns! Are you wrapping an interactive element like a button or input into a component to style it for your design system? You should probably use a directive instead. Found out why and how here:

ng-autocomplete-plugin - Developed one of the most robust autocomplete npm package in Angular Framework. It will be incredible to use the package with major benefits as mentioned below Lightweight ✅ No 3rd party packages installed✅ No angular material or cdk library✅ Supports large data set✅ Customizable scroll functionality✅ Supports custom events✅ Easy virtual scrolling for large data set without 3rd party✅ Custom classes and ng-styles are allowed✅ Ability to use 3rd party style packages like bootstrap, tailwind. (You can update the classes from your component)✅ 20+ solid test cases to validate the module.✅ Custom Spinner✅ ARIA standard ✅ And much more... Will be updating the package with demo links soon. Will be implementing the same for React & Vue when time permits. #angular #autocomplete #ng #npm

Daily Developer Digest Manfred Steyer `s free eBook about Modern Angular. A must read for every #Angular developer https://lnkd.in/enX5pJrq #technology #softwareengineering #programing #web #angular #typescript #javascript #webdev

Although at the moment it is not working with Angular 17, it is interesting to understand the basics of the Framework, Excellent content.

Hello connections, let’s dive into one of the core concepts that makes Angular so powerful — Directives. Directives in Angular are special markers in the DOM (Document Object Model) that tell Angular to do something specific with a DOM element or attribute. They extend HTML’s capabilities by creating new behaviors and altering elements, layouts, and more. Types of Angular Directives: 1)Component Directives Components themselves are directives with templates! These are used to create and control your UI. Every component you write is essentially a directive with a template attached. 2)Structural Directives Structural directives modify the structure of the DOM. They either add or remove elements. Examples include: I)*ngIf → Conditionally includes or excludes a block of HTML. II)*ngFor → Iterates over a list of items and creates a DOM element for each. 3)Attribute Directives These directives change the behavior or appearance of elements. Unlike structural directives, they don’t change the DOM structure but rather modify the existing elements. ngClass → Dynamically adds or removes CSS classes. ngStyle → Dynamically sets inline styles on elements.

I have recently completed a project using Angular framework routing and Angular Material module, focusing on creating a responsive single-page client-server web application with HTML, CSS, and TypeScript. Angular Framework Routing: Implemented efficient routing for seamless navigation and user experience. Angular Material Module: Utilized Angular Material module for visually appealing and interactive components, such as mat cards. Full Responsiveness: Ensured the project is fully responsive across various devices and screen sizes. HTML, CSS, TypeScript: Leveraged these core technologies for a dynamic and maintainable web application. Project Highlights: Single-Page Client-Server Architecture: Optimized performance and user interaction with a single-page application within the client-server model. Interactive UI with Mat Cards: Enhanced user experience with Angular Materiel's mat cards, presenting information in a visually appealing manner. Responsive Design: Implemented responsiveness for seamless adaptation to different devices and screen sizes. "Completed a project using Angular framework routing and Angular Material! 💻 Built a responsive single-page client-server web application with HTML, CSS, and TypeScript. Check out the interactive UI with Angular Material mat cards and seamless navigation. #Angular #AngularMaterial #WebDevelopment #ResponsiveDesign"

"Hello connections! 👋 I'm delighted to share my new project🚀 a BMI Calculator built with Angular 17📊️ This project showcases my skills in front-end development and my passion for creating user-friendly and accurate healthcare tools. this Project calculates your BMI with ease!💡 👉🏻 Project Description Building responsive and interactiv UI components Implementing Using Angular services for calculation logic Creating reusable components for modular code. 🔍️ _Features:_ 📈️ Calculate BMI based on weight and height 📊️ Display BMI category (underweight, normal, overweight, obese) 📱 Responsive design 🔒 Secure and reliable 💻 _Technologies Used:_ 🔹 Angular 17 🔹 HTML5 🔹 CSS3 🔹 TypeScript 🔗 _Live Demo:https://lnkd.in/gTYDc2X9 #Html5 #Css3 #ResponsiveDesign #Angular17 #BMICalculator #Healthcare #Wellness #FrontEndDevelopment"

Blazor is a web frontend framework that enables you to build complete frontend applications using C#, CSS, and HTML. It's user-friendly, offers many built-in tools, and supports server-side rendering. With Blazor, there's no need to install numerous packages to create a web frontend UI, making the process straightforward. If you would like more information about Blazor, you can refer to the official documentation.