Setting up @cds/core icons and @clr/angular dropdown - New to Angular

[nabilbejar]

Describe the bug

I'm new to development with angular but also this is my first time using clarity, I created a new Angular project version 12.2.4, then I installed clarity with the command ng add @ clr / angular , then I added in my component app.component.html file a simple header and sidebar and this is what I got.

I couldn't see the icons or use the dropdown in the header section.

Expected behavior

I can use the header dropdown and see the icons.

Versions

Clarity project:

• Clarity Core
• Clarity Angular/UI

Clarity version:

• v3.x
• v4.x
• v5.x

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
Angular 12.2.4

Code:

app.component.html

<div class="main-container">
  <header class="header-6">
    <div class="branding">
      <a href="javascript://" class="nav-link">
        <cds-icon shape="vm-bug"></cds-icon>
        <span class="title">Project Clarity</span>
      </a>
    </div>
    <div class="header-actions header-actions--overflow">
      <div class="dropdown bottom-left">
        <button class="nav-text dropdown-toggle" aria-label="open user profile">
          [email protected]
          <cds-icon shape="angle" direction="down"></cds-icon>
        </button>
        <div class="dropdown-menu">
          <a href="javascript://" class="dropdown-item">Preferences</a>
          <a href="javascript://" class="dropdown=item">Log out</a>
        </div>
      </div>
    </div>
  </header>
  <div class="content-container">
    <nav class="sidenav">
      <section class="sidenav-content">
        <a class="nav-link nav-icon"><cds-icon shape="home"></cds-icon> Home</a>
        <a class="nav-link"><cds-icon shape="cog"></cds-icon> Settings</a>
        <a class="nav-link active"><cds-icon shape="user"></cds-icon> Users</a>
        <a class="nav-link"><cds-icon shape="Folder-open"></cds-icon> Files</a>
        <a class="nav-link"><cds-icon shape="Cloud"></cds-icon> Data</a>
        <a class="nav-link"><cds-icon shape="image-gallery"> Photos</cds-icon> 6</a>
        <a class="nav-link"><cds-icon shape="video-gallery"></cds-icon> Videos</a>
      </section>
    </nav>
    <div class="content-area">
      ...
    </div>
  </div>
</div>

angular.json

"styles": [
      "node_modules/@clr/ui/clr-ui.min.css",
      "src/styles.scss"
    ],
    "scripts": []

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
import { AddOrEditProductModalComponent } from './components/add-or-edit-product-modal/add-or-edit-product-modal.component';
import { DeleteProductModalComponent } from './components/delete-product-modal/delete-product-modal.component';
import { ClarityModule } from '@clr/angular';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AddOrEditProductModalComponent,
    DeleteProductModalComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ClarityModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I didn't declare or import anything manually, it was all done after installing Angular 12 and the Clarity, are there things that I should import manually or how to make it work ? Can you help me with this please...

[bbogdanov]

Hi @nabilbejar,

What you are missing is adding the icons you would like to use in the registry.

Here you can see more information how to do that.

[nabilbejar]

Hi @bbogdanov,

Thanks for the link that you gave me, I used these two lines in the file app.module.ts to import some icons and it works fine in my HTML template

import { ClarityIcons, userIcon, homeIcon, vmBugIcon, cogIcon, eyeIcon } from '@cds/core/icon';

ClarityIcons.addIcons(userIcon, homeIcon, vmBugIcon, cogIcon, eyeIcon);

Can you please or someone else tell me why the dropdown is not functional ? Is something still missing ?

[mathisscott]

The code you are using is for the HTML/CSS only. It's just styling.

If you want an interactive dropdown in @clr/angular, you have to use the clr-dropdown component.

Docs/examples can be found on the website