CODEWITHSUNDEEP
javascripthtmlcssangularangular-material
vsama
vsama

Reputation: 3

JavaScript DOM Styling Stopped Working After Importing Animation Module In Angular

I have header menu component that can be reused on other components using <app-header-menu [transparentMenu]="isHomepage">/app-header-menu>, if isHomepage is true that means the header menu is shown in Homepage Component thus it has transparent background & absolute position (as you can see on the code snippet below). The problem is, everything had worked perfectly until I imported BrowserAnimationsModule (needed it for MatDialog). Somehow the styling only works on first reload, if I click other menus, the styling disappears. I have been trying to solve this for hours, it seems like nobody has faced this problem before.

notes: this is my first question on stackoverflow, if it lacks something please let me know, thank you in advance!

here is the stackblitz link: https://stackblitz.com/edit/angular-ivy-41hhqz?file=src%2Fapp%2Fapp.module.ts

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    HomepageComponent,
    MostPopularComponent,
    AllPostsComponent,
    FooterComponent,
    HeaderMenuComponent,
    DetailsComponent,
    PhotoViewerDialogComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    MaterialModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

header-menu.component.html

<div class="header__menu-bar container">
  <ul>
    <li [routerLink]="['']" routerLinkActive="active-link" [routerLinkActiveOptions]="{ exact: true }">Home</li>
    <li [routerLink]="['../all-posts']" routerLinkActive="active-link">All Posts</li>
    <li [routerLink]="['../most-popular']" routerLinkActive="active-link" >Most Popular</li>
    <li (click)="onClickContactMe()">Contact Me</li>
  </ul>
</div>

header-menu.component.ts

export class HeaderMenuComponent implements OnInit {

  private _transparentMenu: boolean;
  colorDarkBlueMenu = 'rgba(29, 60, 69, .75)';
  colorDarkBlue = 'rgba(29, 60, 69)';

  get transparentMenu(): boolean {
    return this._transparentMenu;
  }

  @Input()
  set transparentMenu(value: boolean) {
    this._transparentMenu = value;
    const homeMenuBar = document.querySelector('.header__menu-bar') as HTMLElement;
    if (value === true) {
      homeMenuBar.style.backgroundColor = this.colorDarkBlueMenu;
      homeMenuBar.style.position = 'absolute';
    } else {
      homeMenuBar.style.backgroundColor = this.colorDarkBlue;
      homeMenuBar.style.position = 'relative';
    }
  }

  constructor() {
    this._transparentMenu = true;
  }

  ngOnInit(): void {
  }
}

Upvotes: 0

Views: 72

Answers (1)

Shabbir Dhangot
Shabbir Dhangot

Reputation: 9121

Instead of reading div as HTMLElement you can directly bind CSS properties into DOM Element.

<div class="header__menu-bar container" 
[style.background]="transparentMenu?'rgba(29, 60, 69, .75)':'rgba(29, 60, 69)'"
[style.position]="transparentMenu?'absolute':'relative'">

Here is working StackBlitz example. https://stackblitz.com/edit/angular-ivy-gopszk

Upvotes: 1

Related Questions