Unable to alter fxFlex property within Component using "setAttribute('fxFlex', '25%')" does not function properly in Angular 6

Currently, I am utilizing the flexLayout module to create responsive divs in my Angular application. You can find more information about flexLayout at https://github.com/angular/flex-layout and also at https://alligator.io/angular/flex-layout/.

const nav = document.getElementById('nav2'); nav.setAttribute('fxFlex', '5%');

In the HTML component:

<div fxLayout>
<div id="nav2" fxFlex="25%" class="col-md-2.5 bg-white p-1">hello</div>
<div id="nav1">word</div></div>

The intention is for the above code snippet to change the layout size to 5%. However, upon inspecting the page, it seems like the attribute has been modified but the layout remains unchanged. Interestingly, manually altering the HTML code to 5% produces the desired result.

I am currently working with Angular 6 and Typescript 3.1.1.

If you have any suggestions or insights on this issue, please feel free to share.

Thank You!

htmlangulartypescriptfrontendangular-flex-layout

Answer №1

It is important to note that the code should typically adjust the Layout size to 5%

However, this is not the correct approach.

Angular directives are utilized in Typescript, or within a pre-built environment.

For instance, when you input:

document.getElementById('nav2'); nav.setAttribute('fxFlex', '5%')

You are directing the Javascript, which has been compiled from Typescript (thus, in a post-built context) to select the element and incorporate an Angular directive into your attribute.

The issue here lies in the fact that the code has already undergone compilation, making it impossible to seamlessly integrate typescript into Javascript without recompiling it again (if even possible).

My recommendation is to familiarize yourself with angular functionalities and its operational mechanics before implementation. Additionally, consider providing a Minimal, Complete, and Verifiable example for tailored solutions specific to your scenario.

Answer №2

To dynamically set attributes in Angular, it is necessary to utilize the renderer2.

For example:

HTML

<div #myDiv id="nav2" fxFlex="25%" class="col-md-2.5 bg-white p-1"></div>

component.ts

import {ElementRef,Renderer2} from '@angular/core';

...

export class MyComponent implements AfterViewInit {

    @ViewChild('myDiv') el:ElementRef; // obtain reference to DOM element

    constructor(private rd: Renderer2) {}

    ngAfterViewInit() {
        // Update DOM after view initialization
        this.renderer2.setAttribute(this.el.nativeElement, "fxFlex", "5%");
    }

}

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

Using an external module in a Vue SFC: a beginner's guide

Recently delving into Vue, I'm working on constructing an app that incorporates Typescript and the vue-property-decorator. Venturing into using external modules within a Single File Component (SFC), my aim is to design a calendar component utilizing t ...

javascripttypescriptvue.jscomponentsvue-component

Strip the specified span class from the content within $(this).html()

My search function returns search results in spans. When a span is clicked, a new span with a select input and hidden input is added to another div, allowing all selected features to be posted as an array. I have a question: The $(this).html() now include ...

htmlajax

Incorporate geographical data from a JSON file into my Google Maps application

Hey there, I'm a newbie on this forum and could really use your expertise. I've put together an html5 page with Google maps using the API key from Google (My code is shown below), it's working fine with a central marker in place and loads pe ...

javascriptjsonhtml

Building a customizable class from scratch

I am currently working on developing configurable classes that come with default values, but allow for configuration changes if needed. The concept involves creating an instance of a class by calling its type specified in the static properties of the Test ...

typescript

Is there a way to conceal 'private' methods using JSDoc TypeScript declarations?

If we consider a scenario where there is a JavaScript class /** * @element my-element */ export class MyElement extends HTMLElement { publicMethod() {} /** @private */ privateMethod() {} } customElements.define('my-element', MyElement) ...

javascripttypescriptprivatejsdoc.d.ts

The amazingly efficient Chrome quick find feature, accessible by pressing the powerful combination of Ctrl + F, ingeniously

Currently using Google Chrome version 29.0.1547.62 m. I've employed the CSS attribute overflow set to hidden on the parent element, which renders some of my DIV elements hidden from view. Additionally, these concealed DIV elements are adjusted in pos ...

javascripthtmlcssgoogle-chrome

Discriminator-based deserializer with strong typing

Seeking advice on how to effectively utilize TypeScript for strongly typing a function that operates similarly to the following example: function createDeserializer(typeDeserializers) { return (data) => { const deserializer = typeDeserializ ...

typescript

Tips for keeping your button fixed in place

I am encountering an issue where my button moves below the select dropdown list when I try to make a selection. Is there a way to keep the button in place even when the dropdown list from the select box is visible? For reference, here is the current outp ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Express Server Providers for Angular 17's Server-Side Rendering

I attempted to share my request and response object with the Angular application by defining Providers in the "server.ts" file. However, when injecting them into app.component, they always appear undefined regardless of whether I am in the server or clie ...

angulartypescriptserver-side-renderingangular-providers

Tips on how to align a wrapper-div in the center without affecting the positioning of the

I am looking to keep my page perfectly centered in the browser without affecting the content (similar to how align-text: center works). Specifically, I want to center my wrapper-div. How can I achieve this? Here is a simplified version of my current page ...

htmlcsspositioning

Creating HTML within a Servlet by incorporating additional quotation marks

Currently, I'm attempting to construct some HTML markup within a Spring controller. Here is a snippet of the code: append(sb ,"<div class=&quot;myDiv&quot;>"); This code snippet ends up generating the following HTML source in the brows ...

javahtmlspringjsp

Tips for keeping your avatar contained within a Bootstrap grid

I am attempting to adjust the positioning of my "image holder" (avatar) with a top and bottom margin of 3px, but when I implement this change, the image holder shifts outside of the grid. Below is the code snippet in question: <div class="container con ...

htmlcss

Display the chosen alternative in a Bootstrap dropdown menu

I am currently facing an issue with the dropdown list in my bootstrap menu. <li class="dropdown"> <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Chose option<span class="c ...

javascriptjqueryhtmlcsstwitter-bootstrap

Struggling with rendering an HTML element utilizing jQuery's attribute functionality, encountering issues exclusively in Internet Explorer version

I need assistance with generating and inserting an HTML element using jQuery. In my code, I am including a class attribute for the element as shown below: jQuery('<li></li>', { class: "myClass" }); However, when testing in IE ...

javascriptjqueryhtml

The website's scrolling speed is painfully slow

Currently, I am working on enhancing the performance of this site at . If you scroll through the site or navigate using the Up and Down Arrow Keys, you may notice a sluggish and slow Scroll Behaviour. I am utilizing HTML5 and simple img tags with 85% wid ...

performancehtmlcss

Refresh WebPage automatically after a Servlet successfully uploads and processes an image

I have a webpage that includes an image and a button. When the button is clicked, it uploads the image by submitting a form to a file upload servlet. However, after successfully uploading the image, the servlet does not display it in the img tag. Here is ...

javascriptjavajqueryhtmlservlets

How about trying out the magic of Bootstrap columns?

My issue pertains to bootstrap columns. Whenever I zoom in on the browser, the columns start overlapping and the text from col-md-7 ends up over the image. Does anyone know of a solution to this problem? <div class="row"> <div class="col-md-5 ...

htmlcssbootstrap-4

Ways to cancel a subscription once a specific parameter or value is met following a service/store interaction

I am working with a service that provides a changing object over time. I need to unsubscribe from this service once the object contains a specific property or later when the property reaches a certain value. In situations like these, I typically rely on t ...

angulartypescriptobservablengrx

Unable to assign to 'options' as it is not recognized as a valid property of 'p-multiSelect'

I am currently in the process of incorporating the datatable filter from primeng into my project. Here is the code snippet I have written: <p-column field="time" header="Time" [filter]="true" filterPlaceholder="&#xf0b0;"> <ng-template pTe ...

angulardatatableprimeng

What is the best way to apply a CSS class to newly added records within an HTML table that are being fetched from a MySQL database?

The title does not provide clear instructions. If more details are needed, the code below displays data from a MySQL database table on an HTML page: <?php $db_host = 'localhost'; $db_name = 'DB'; ...

phphtmlmysql