News Articles angular

Show only relevant entries from Strapi Blog in Angular 10

I have a Blog backend made with Strapi, where you can add some content-types like title field, description field and content field. I also have a boolean content-type to set if the blog is relevant or not. I set an ngFor in Angular to show all my blog entries; But I just want to show […]

Various Types of Angular Component Selectors

Today we will be learning the various ways of using the component selector in Angular. If you are unaware of what is a component in Angular or what are the different parts of it I would recommend you to have a quick read on the following article – Understanding-Components. There are mainly four different ways […]

Should I learn React or angular js

Hello Everyone.. Introduction In this Article we are seeing the best things I can’t tell about what to learn, but there are advantages of both of them, and I hope my comparison will help you to choose or at least learn something new. ReactJS ReactJS is a JavaScript library developed and powered by Facebook.It has […]

D3.js keep running into this error TypeError: Cannot read properties of null (reading ‘ownerDocument’)?

When I am trying to create a legend for my d3 graph I keep running into this error TypeError: Cannot read properties of null (reading ‘ownerDocument’) at new EnterNode (enter.js:9) 8 export function EnterNode(parent, datum) { 9 this.ownerDocument = parent.ownerDocument; this only happens once in a while and not always, my d3 configuration; private data: […]

Render icons from an SVG file on HTML page

I have an icons.svg file that seems to contain assets that I need to use in my Angular app. The file looks something like this (note, the … means omitted data due to security reasons): <svg xmlns="" xmlns:xlink=""><defs><path d="…" id="o"/></defs><symbol id="icon-add-member-contain-heavy" viewBox="0 0 64 64"><path d="B0 … 4A3q"/></symbol><symbol id="icon-add-member-contain-light" viewBox="0 0 64 64"><path d="A5 … […]

How to tree-shake unused Material Icons in Angular

I am using Material Icons in my project. In order to use the icons throughout the app, I need to import MatIconModule. Now, since I am using only ~20 icons in the app, I would like only them to be included in the final bundle. I saw MatIconRegistry service, but that seams to register custom […]

Setting-up Angular Routing From Scratch

According to Wikipedia Routing in layman’s language is – “… the process of selecting a path for traffic …“. If we talk in Angular context, in a large application there will be multiple components combined together to form a feature (e.g. login, dashboard, user profile etc.). But we cannot show all the feature to the […]

How to create two inputs as one form field and apply style specifically in Angular Material?

Using Angular Material, I am building an example app with a form, which has a form field with two elements (input field and dropdown). So, for time being, I have implemented flex styles and attributes as follows: <div class="row"> <mat-label>Dessert</mat-label> </div> <div fxLayout="row"> <mat-form-field appearance="outline" fxFlex="80"> <input matInput type="text" formControlName=""> </mat-form-field> <mat-form-field appearance="outline" fxFlex="20" style="background-color: […]

Splitting Angular Applications Into Micro Front-Ends

The alternative approach of designing huge applications. Read All Source: Hacker Noon – JavaScript

How to load an external Angular app inside a div?

I need to create a single-page-application calendar web app which acts as a widget, so clients can plug it on their websites inside a specified div container. How can I achieve this? Would Angular be a suitable framework for this task? Source: JavaSript – Stack Overflow

How to get row index of ag-grid checkbox

I have a ag-grid table that has checkboxes in each row. When I click a checkbox I want to be able to determine the index of the row. I have tried: onRowClick(event: any): void { console.log(event.rowIndex); } and this sort of works but not really. If I click on the row I will get the […]

Fixed nav menu with z-index 1000 doesn’t cover angular material components

I have a fixed navbar that opens up when a user clicks on the hamburger icon. Problem is, it covers all elements in the page except for the elements that are actually Angular material components. As you can see in the picture, get started and token buttons are not covered by the hamburger menu like […]

🧽 Clean Way to Listen to Events from Children Components in Angular

I don’t write much about Angular but as I am working on a project that uses Angular at the moment I thought why not share a thing or two that I found interesting. As someone who is definitely not an Angular expert I was looking for a clean solution on how to listen for element […]

View does not get updated on Mobile app after angular variables are updated, though it works on browser

When the angular variables are updated inside the component after some API calls, it should be reflected in the UI of the mobile view (depending on the value of *ngIf), but it does not. It works on the web, desktop, etc. And if I create an extra button on the mobile page and click it […]

Angular do not show images

My angular project do not show images content.component.html <div class="mt-5"><img src="/assets/images/aaa.img" alt="image"></div> assets anf imges its just show me this Source: CSS – Stack Overflow

What are Router Events in Angular?

During each navigation, the Router emits navigation events through the property allowing you to track the lifecycle of the route. Read All Source: Hacker Noon – Programming

How to create an interactive SVG donut chart using Angular

In this post, we will create an SVG donut chart with clickable slices/parts. I will first explain the problem with the common way to implement an SVG donut chart (using stroke-dasharray and stroke-dashoffset). Then we will talk about a new way to do it, I will walk you through the math in great detail and […]

getting type error when I try to assign interface to a property

I’m using typescript in my Angular project trying to assign IInfoPage interface to data export interface IInfoPage { href: string; icon: string; routing: boolean; order: number; styleType: string; } public pageData: IInfoPage; this.configService.PageData.subscribe((res) => { this.pageData = res.SubMenu.find(data => location.pathname.includes(‘path’)); }) But as I see this.pageData alerts and gives me this error: Type ‘ISubMenuType | […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.