Angular project component style don't want to display

Question

i'm trying some css test on my project, but one of my component don't want to show his css.

This is my Angular structure :

my app.component.html

<div id="nav-bar">
  <div id="nav-bar-content">
  <div id="nav-bar-left">
  <div>Pangolin</div>
  </div>
  <div id="nav-bar-right">
  <div>Register</div>
  </div>
  </div></div>

<router-outlet></router-outlet>

my app.component.css

#nav-bar {
  border: solide 5px red;
 
}

my app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'socialnetworkapp';
}

and this is what i have in my browser :

and this is my app.module.ts

// built in
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import {MatButtonModule} from '@angular/material/button';
//component import
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UserComponent } from './components/user/user.component';
import { LoginComponent } from './components/login/login.component';
import { AccountComponent } from './components/account/account.component';
import { PageOneComponent } from './components/page-one/page-one.component';
import { navbarComponent } from './components/navbar/navbar.component';
import { SignUpComponent } from './components/sign-up/sign-up.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';




@NgModule({
  declarations: [
    AppComponent,
    UserComponent,
    LoginComponent,
    AccountComponent,
    PageOneComponent,
    navbarComponent,
    SignUpComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    MatButtonModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

My /src/app/components/page-one module works perfectly. Is it some children, parents issue there ? I'm new on Angular

thomaux · Accepted Answer · 2022-11-04 16:53:39Z

0

Your CSS is incorrect, solide should be solid:

#nav-bar {
  border: solid 5px red;
}

See MDN border-style for a full list of valid border styles.

edited Nov 4, 2022 at 16:53

answered Nov 4, 2022 at 16:51

thomaux

19.8k10 gold badges83 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

damian Over a year ago

my bad, yes your right, but event with solid , my css isn't display

thomaux Over a year ago

In your browser's dev tools, if you inspect the nav bar element, what do you get?

damian Over a year ago

i have no errors, i can see my navbar and my Ids, but i have no css style. For exemple for my <div id="navbar"> i only have div { display:block }

Collectives™ on Stack Overflow

Angular project component style don't want to display

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related