The excessive repetition in Angular flex layout is becoming overwhelming

I discovered and started using the responsive API provided by angular flex layout. While most of the time it works as intended, there are instances where I find myself duplicating directives in the code. Here's a simplified example:

<div>

  <div ngClass.lt-md="mobile-cell">
    <span fxHide fxShow.lt-md="true" class="mobile-label">Text1</span>
  </div>

  <div ngClass.lt-md="mobile-cell">
    <span fxHide fxShow.lt-md="true" class="mobile-label">Text2</span>
  </div>

  <div ngClass.lt-md="mobile-cell">
    <span fxHide fxShow.lt-md="true" class="mobile-label">Text3</span>
  </div>

  ....

</div>

Is there a more elegant solution (perhaps utilizing pure CSS) to eliminate this repetition? For instance, is there a way to apply the mobile-cell class to all sibling elements when the breakpoint is activated?

cssangularangular-flex-layout

Answer №1

To ensure that all direct children of the class .parent inherit the styles from .mobile-cell, it is best to apply the styles to the parent just once. In your CSS, you can then easily target all direct child div elements of the .mobile-cell parent.

<div class="parent" ngClass.lt-md="mobile-cell">

  <div>
    <span fxHide fxShow.lt-md="true" class="mobile-label">Text1</span>
  </div>

  <div>
    <span fxHide fxShow.lt-md="true" class="mobile-label">Text2</span>
  </div>

  <div>
    <span fxHide fxShow.lt-md="true" class="mobile-label">Text3</span>
  </div>

  ....

</div>

.mobile-cell > div{
/* your style*/
}

Answer №2

Your custom HTML

<div ngClass.lt-md="mobile-list">

    <div>
        <span fxHide fxShow.lt-md="true">Custom Text 1</span>
    </div>

    <div>
        <span fxHide fxShow.lt-md="true">Custom Text 2</span>
    </div>

    <div>
        <span fxHide fxShow.lt-md="true">Custom Text 3</span>
    </div>

    ....

</div>

Your personalized CSS:

.mobile-list > div {
    /* Custom mobile-cell styles */
}
.mobile-list > div > span {
    /* Custom mobile-label styles */
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Increasing the value of a TypeScript variable using ngFor in an HTML template can enhance its usefulness

Can you dynamically increase a variable declared in your TypeScript file for each element generated by an ngFor loop in your HTML file? <tbody> <tr *ngFor="let item of invoiceItems"> <td>{{item.ItemName}}</td> <td>{ ...

htmlangulartypescriptngfor

Angular: radio buttons require values to be numerical

I'm encountering an issue while trying to implement two radio buttons for users to select their gender. Everything works fine when I assign numerical values to both [value]s. However, if one of the values is changed to a non-numerical value, I am stil ...

angular

Retrieve CSS content from a file hosted on the local server

Is it feasible to use a locally hosted CSS file for styling a website managed by a server-based CMS? I am interested in utilizing SASS for local CSS development while retrieving the HTML content from a centrally hosted CMS server. ...

htmlcss

Grid Property Equivalent to Flex-Grow

I stumbled upon a bug in the way Chrome version 75 handles flexbox. Therefore, I am curious to explore if the issue persists with grid, but for my test to be accurate, I need a grid property that functions similarly to flex-grow considering the current str ...

csscss-grid

"Upon refresh, the overflow property of the child element is being applied to the window position

In the React app I'm working on, there's a search results page where users can apply filters. These filter selections update the query params in the URL and trigger a re-mount in React. However, I've encountered an issue across different bro ...

javascripthtmlcssreactjs

Linking a radio button to another mirrored radio button for selection

It should be a straightforward task. I have two sets of radio buttons that mirror each other, known as set A and set B Set A includes buttons 1, 2, and 3 Set B also consists of buttons 1, 2, and 3 The desired behavior is for clicking button 1 in set A t ...

javascripthtmlcss

In IE, the hover state of the background color and sub menu is frequently toggling

I've been struggling with this issue all week. I have a CSS dropdown menu that uses both standard lists and content boxes as sub menus. The problem lies in IE, where each LI has an anchor tag that is set to display block in order to fill the parent LI ...

htmlcssinternet-explorer

Issue: Troubile in fetching CSS file from CDN and using local copy as fallback, What is the solution?

I previously inquired about this issue, however, I did not receive a satisfactory solution. Therefore, here I am asking again for your assistance. I am attempting to retrieve my CSS from an external CDN service, such as http://cdn.example.com/. This scrip ...

phpcssfunctionexternal

How to ensure the right size for your sections in HTML5

I am currently learning HTML5 and attempting to create a specific sized section in the browser where various elements like buttons and text will be displayed based on user interaction. However, I am running into an issue with adjusting the size of the sect ...

csshtml

Tips on effectively centering a wide div

After much experimentation, this is what I came up with: (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en ...

javascriptjqueryhtmlcss

Yet another interactive JQuery feature found within the JQuery UI Tabs framework, utilizing seamless Ajax page loading

Currently, I am using JQuery U Tabs with Ajax Page Calls. In my Pages, I have a custom scroller that is functioning correctly. Additionally, I have an ajax search table that works when the page is loaded by itself in the browser but not when called within ...

javascriptjqueryhtmlcss

Identify all anchor elements that contain image elements

I am on the hunt. I am looking for a CSS-Selector, but if that's not an option, a jQuery selector would work too. ...

jquerycssimagecss-selectors

What is the best way to access the data being sent to a router link in Angular?

After navigating to the user page using the router sample below, how can I retrieve the details once it reaches the user page? I need to verify in my user.component.ts that the navigation is triggered by this [routerLink]="['user', user.id, &apo ...

angulartypescript

Exploring the application of styles within the shadow DOM

I'm experimenting with applying styles to the shadow DOM. Consider the following example: const element = document.getElementById("bar"); const shadowRoot = element.attachShadow({ mode: "open" }); const greeting = document.createElement("p"); gree ...

javascripthtmlcssangularshadow-dom

transforming a div container into an inline element using CSS

Hey there! I'm facing an issue with CSS where I am trying to change a div tag into inline. <div id="menu1"> <ul> <a href="#"> <li> one</li> </a> <a href="#"> <li> two</li> </a> <a h ...

htmlcss

The resizing of the background image is contingent upon the size of the

I am facing an issue with my bootstrap carousel. One of the items only contains a background image without any content. I have set a height for it so that it is still visible even without content. However, when viewing on mobile devices, I can only see a p ...

jqueryhtmlcsstwitter-bootstrap

How do I access the current state in Ngrx Store without the need to subscribe, specifically for use in a route Resolve?

Presently, my Resolve implementation is quite straightforward: export class UserResolve implements Resolve<any>{ constructor(private userService: UserService){} resolve(route: ActivatedRouteSnapshot){ return this.userService.get(route. ...

angularngrx-storeangular5

How to Invoke a TypeScript Function in Angular 2 Using jQuery

Using the Bootstrap-select dropdown in Angular 2 forms with jQuery, I am attempting to call a Typescript method called onDropDownChangeChange on the onchange event. However, it seems to not be functioning as expected. import { Component, OnInit, ViewChi ...

angulartypescriptangular2-formstypescript2.0

Regular Expressions: Strategies for ensuring a secure password that meets specific criteria

Struggling to craft a regex for Angular Validators pattern on a password field with specific criteria: Minimum of 2 uppercase letters Minimum of 2 digits At least 1 special character. Currently able to validate each requirement individually (1 uppercase ...

regexangulartypescriptvalidation

How can we avoid re-rendering the same component repeatedly when using React Router v6?

As a beginner in react, I'm facing an issue with preventing components from re-rendering when navigating to a different page. Specifically, I want to display only text on my Signup and Login pages, but the Navbar keeps re-rendering every time I switch ...

javascriptcssreactjsreact-native