Is there a method in Typescript within Angular that allows for CSS style changes?

I have been able to successfully hide the div tag using the code below.

Html file

  <mat-toolbar style="position: fixed;"  *ngIf="div1"  >
    <mat-toolbar-row>
      <div class="input-group has-search">
        <input class="form-control py-2 rounded-pill mr-1 pr-5"  placeholder="Search">
      </div>
    </mat-toolbar-row>
    </mat-toolbar>

  <button (click)="home()></button>

Ts file

 div1:boolean=true;

    home()
      {
        this.div1=false;
     }

However, there is a visible space remaining due to the fixed position of the toolbar. How can I change the toolbar position to relative in the "home()" method?

angulartypescript

Answer №1

To achieve this, you can make use of the ngStyle property in the following way:

 
<mat-toolbar [ngStyle]="{'position': div1 ? 'fixed' : 'static' }" *ngIf="div1"  >
    <mat-toolbar-row>
      <div class="input-group has-search">
        <input class="form-control py-2 rounded-pill mr-1 pr-5"  placeholder="Search">
      </div>
    </mat-toolbar-row>
    </mat-toolbar>

  <button (click)="home()></button>
<mat-toolbar>

Answer №2

There are several ways to achieve this task. One approach is to utilize [ngStyle], which will apply all styles. Another option is to use [class.classname]="true/false", or as illustrated here, directly set the style for position.

It's important to note that *ngIf should completely remove the element, so any styling issues you encounter may be unrelated.

  <mat-toolbar [style.position]="div1 ? 'fixed' : 'static'" *ngIf="div1"  >
     <mat-toolbar-row>
        <div class="input-group has-search">
           <input class="form-control py-2 rounded-pill mr-1 pr-5" placeholder="Search">
         </div>
      </mat-toolbar-row>
   </mat-toolbar>

   <button (click)="home()"></button>

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

Secure your TypeScript code by encapsulating it with protection mechanisms and distribute

Currently in the process of constructing an internal TypeScript "library" using webpack 1.14. I've set up an npm package and have it published on a private feed, which is working smoothly (able to utilize classes and interfaces from the library in o ...

typescriptnpmwebpack

Guide on creating a Jasmine test for a printer utility

Currently, I am working on writing a Jasmine test for the print function shown below: printContent( contentName: string ) { this._console.Information( `${this.codeName}.printContent: ${contentName}`) let printContents = document.getElementById( c ...

javascriptangulartypescriptjasmine

Trying to filter an array of number|undefined in TypeScript to only include numbers is not identified as an array of numbers

Below is the code snippet: type TEntity = Array<{ size?: number }> const someVar: TEntity = //@ts-ignore getFromSomewhere() function isNumber(input: any): input is number { return !isNaN(Number(input)) } const sizes1: number[] = so ...

typescript

Show the subjects' names and their scores once they have been added to a fresh array

Here is my unique code snippet: let fruits: string[] = ['Apple', 'Banana', 'Orange', 'Grapes', 'Mango']; function capitalize(fruit: string) { return fruit.toUpperCase(); } let uppercaseFruits = fruits ...

arraystypescript

Unraveling the mysteries of webpack configuration

import * as webpack from 'webpack'; ... transforms.webpackConfiguration = (config: webpack.Configuration) => { patchWebpackConfig(config, options); While reviewing code within an Angular project, I came across the snippet above. One part ...

javascriptangulartypescriptwebpackbrowser

Removing a row from a FormArray within a FormGroup is not the appropriate method for managing input fields within a MatTable

I am encountering an issue with my MatTable, which is formed from a formarray. When I delete a row, the values in the input fields of my table are not updating as expected. However, the data in the object reflects the correct changes after deleting the r ...

angularangular-materialformarray

Form in Angular 6 does not trigger the event

I am currently utilizing Angular 6 and have created an attribute directive. Within this directive, I have defined a click event. @Directive({ selector: "[pa-attr]" }) export class PaAttrDirective { @Input("pa-attr") @HostBinding("class") bgC ...

angular

"Create a separate function for the pipeable operator in RXJS for enhanced code

After working on some code, I came up with the following implementation this.form.valueChanges.pipe( take(1), map(val => // doSomething), exhaustMap(val => // someInner observable logic return of({someValue}) ) ).subscrib ...

angulartypescriptrxjs

After transforming an angular project into an npm module, where should the html, css, and other files be placed? Additionally, what is the process for converting a project into

I am looking to modify the ngx-material-timepicker node module by making changes to the basic HTML and CSS of the project. However, I have found that there are no HTML or CSS files available in the node_modules-> ngx-material-timepicker folder, only TS ...

angularjsangulartypescriptgithub

The compatibility between Bootstrap DropDown and collapse features and angular2-meteor seems to be problematic

After installing bootstrap in my angular2-meteor project with the following command: meteor npm install --save <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f4d40405b5c5b5d4e5f6f1b011f011f024e435f474e011a">[email pro ...

twitter-bootstrapangularmeteorangular2-meteor

Learn how to host a singular instance of an Angular application for every unique route, similar to the setup utilized in meet.jit.si

Is there a way to create an Angular app that loads a new instance of itself on every route/url? For example, visiting http://happy-app.com/happy would show the app in one state, and going to http://happy-app.com/happier would load the same app in a differe ...

angularwebsocketreal-time

What is the reason behind TypeScript requiring me to initialize a property even though I am retrieving its value from a local reference?

I am just beginning to explore Angular. This is the template for my custom component: <div class="row"> <div class="col-xs-12"> <form action=""> <div class="ro"> <d ...

angulartypescript

What is the best way to import modules in Typescript/Javascript synchronously during runtime?

I have a Typescript class where I am attempting to perform a synchronous import, however, the import is being executed asynchronously. My code snippet looks like this: --------------100 lines of code-------------------- import('../../../x/y/z') ...

javascripttypescriptdynamic-import

Adjust the icon's color after it has been clicked

How can I make the icon change color after it's clicked in Angular 4 with Bootstrap? I have icons displayed in panels using *ngFor loop and currently, when I click on an icon, it changes color in all panels. How do I make it change color only in the s ...

angular

The error message SCRIPT1003 is indicating that a colon was expected

There are many questions with this title, but I have a unique one for you. An error message "SCRIPT1003: Expected ':' (1,78)" pops up when I launch my website. I am using webpack and typescript in my project. Below is my tsconfig: { "co ...

javascripttypescriptinternet-explorerwebpack

Created computed getter and setter for Vue models (also known as "props") using the syntax of Vue Class Component

After exploring the limitations of v-model in Vue 2.x in this Stack Overflow thread, I discovered a way to connect parent and child components using v-model. The solution proposed is as follows: --- ParentTemplate: <Child v-model="formData"> ...

typescriptvue.jsvuejs2vue-class-componentsvue-property-decorator

Navigating Between Pages with Parameters in Ionic 2 (starter app)

I have an Ionic 2 project with a blank template containing a page that displays a list. Upon clicking on an item in the list, the user should be able to view more details about that specific item. Below are the files related to the list: list.html: <i ...

javascriptangulartypescriptionic2ionic3

What could be causing the Typescript error when utilizing useContext in combination with React?

I am currently working on creating a Context using useContext with TypeScript. I have encapsulated a function in a separate file named MovieDetailProvider.tsx and included it as a wrapper in my App.tsx file. import { Context, MovieObject } from '../in ...

reactjstypescriptuse-stateuse-context

Enum-centric type guard

Could I create a custom type guard to verify if a specified string is part of a specific string enum in a more specialized way? Check out the following example: enum MyEnum { Option1 = 'option one', Option2 = 'option two', } const ...

typescript

Ionic 2 fails to navigate when using [navPush]

Today I delved into working with Ionic 2 and was making good progress. I had successfully implemented navigation across 3-4 pages, but then something suddenly broke that has left me scratching my head. Now whenever I try to navigate to another page, I kee ...

angularionic-frameworkionic2