I found a sidebar on Stackblitz, I would like to use in my project.

There are 2 files that I don't understand, how I should adapt on my project app.component.html and app.component.ts.

Where I have to put THE HTML -> app.component.html

<ng-icon-sidebar>
  <!-- Your content goes here, inside the sidebar's tag. This sample content exists for demonstration purposes. -->
  <ul>
    <li>
      <a href="#">
        <span >
          <i >mail</i>
        </span>
        Inbox
      </a>
    </li>
    <li>
      <a href="#">
        <span >
          <i >send</i>
        </span>
        Outbox
      </a>
    </li>
    <li>
      <a href="#">
        <span >
          <i >favorite</i>
        </span>
        Favorites
      </a>
    </li>
    <li>
      <a href="#">
        <span >
          <i >archive</i>
        </span>
        Archive
      </a>
    </li>
    <li>
      <a href="#">
        <span >
          <i >delete</i>
        </span>
        Trash
      </a>
    </li>
    <li>
      <a href="#">
        <span >
          <i >report</i>
        </span>
        Spam
      </a>
    </li>
  </ul>
  <!-- End of sample content for demonstration purposes. -->
</ng-icon-sidebar>

And -> app.component.ts

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

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

Currently in my project, I have 2 folders Home and Login. I don't know where/how I should adapt the sidebar for app.component.html and app.component.ts.

The password is test1 in my project -> Stackblitz

CodePudding user response：

Method 1

You can simply put the sidebar html code in the app.component.html File:

    <ng-icon-sidebar>
  <!-- Your content goes here, inside the sidebar's tag. This sample content exists for demonstration purposes. -->
  <ul>
    <li>
      <a href="#">
        <span >
          <i >mail</i>
        </span>
        Inbox
      </a>
    </li>
    <li>
      <a href="#">
        <span >
          <i >send</i>
        </span>
        Outbox
      </a>
    </li>
    <li>
      <a href="#">
        <span >
          <i >favorite</i>
        </span>
        Favorites
      </a>
    </li>
    <li>
      <a href="#">
        <span >
          <i >archive</i>
        </span>
        Archive
      </a>
    </li>
    <li>
      <a href="#">
        <span >
          <i >delete</i>
        </span>
        Trash
      </a>
    </li>
    <li>
      <a href="#">
        <span >
          <i >report</i>
        </span>
        Spam
      </a>
    </li>
  </ul>
  <!-- End of sample content for demonstration purposes. -->
</ng-icon-sidebar>


<!-- nav -->

<div  style="float: right" *ngIf="currentUser">
  <a  routerLink="/">Home</a>
  <a  (click)="logout()">Logout</a>
</div>

<!-- Top Bar Start -->

<div >
  <div >
    <img
      
      src="https://zupimages.net/up/21/42/010i.gif"
      alt="img"
    />
  </div>
</div>

<!-- Top Bar End -->

<!-- main app container -->
<router-outlet></router-outlet>

Method 2

Make a new component with ng generare component <component name>, simply copy and paste the code from the sidebar project and reference this component in your app.component.html like this:

<!-- nav -->

<app-[your-component-name]>

<div class="navbar-nav" style="float: right" *ngIf="currentUser">
  <a class="nav-item nav-link" routerLink="/">Home</a>
  <a class="nav-item nav-link" (click)="logout()">Logout</a>
</div>

<!-- Top Bar Start -->

<div class="top-bar">
  <div class="top-bar-logo">
    <img
      class="fit-picture"
      src="https://zupimages.net/up/21/42/010i.gif"
      alt="img"
    />
  </div>
</div>

<!-- Top Bar End -->

<!-- main app container -->
<router-outlet></router-outlet>

I hope i could help you.

CodePudding user response：

after you made your component and copy and paste the code from the sidebar project you should reference the name correctly that is ng-icon-sidebar not app-sidebar that should solve your problem :)