CODEWITHSUNDEEP
angulartypescript
user17236717
user17236717

Reputation:

Sidebar structure for a small project

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 class="icon-container">
          <i class="material-icons">mail</i>
        </span>
        Inbox
      </a>
    </li>
    <li>
      <a href="#">
        <span class="icon-container">
          <i class="material-icons">send</i>
        </span>
        Outbox
      </a>
    </li>
    <li>
      <a href="#">
        <span class="icon-container">
          <i class="material-icons">favorite</i>
        </span>
        Favorites
      </a>
    </li>
    <li>
      <a href="#">
        <span class="icon-container">
          <i class="material-icons">archive</i>
        </span>
        Archive
      </a>
    </li>
    <li>
      <a href="#">
        <span class="icon-container">
          <i class="material-icons">delete</i>
        </span>
        Trash
      </a>
    </li>
    <li>
      <a href="#">
        <span class="icon-container">
          <i class="material-icons">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

Upvotes: 0

Views: 230

Answers (2)

Hadith Rashidi
Hadith Rashidi

Reputation: 11

After you generated your component and copy and paste the code from the sidebar project you should reference the name correctly as ng-icon-sidebar not app-sidebar.

This should solve the issue.

Upvotes: 1

Maldek
Maldek

Reputation: 26

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 class="icon-container">
          <i class="material-icons">mail</i>
        </span>
        Inbox
      </a>
    </li>
    <li>
      <a href="#">
        <span class="icon-container">
          <i class="material-icons">send</i>
        </span>
        Outbox
      </a>
    </li>
    <li>
      <a href="#">
        <span class="icon-container">
          <i class="material-icons">favorite</i>
        </span>
        Favorites
      </a>
    </li>
    <li>
      <a href="#">
        <span class="icon-container">
          <i class="material-icons">archive</i>
        </span>
        Archive
      </a>
    </li>
    <li>
      <a href="#">
        <span class="icon-container">
          <i class="material-icons">delete</i>
        </span>
        Trash
      </a>
    </li>
    <li>
      <a href="#">
        <span class="icon-container">
          <i class="material-icons">report</i>
        </span>
        Spam
      </a>
    </li>
  </ul>
  <!-- End of sample content for demonstration purposes. -->
</ng-icon-sidebar>


<!-- nav -->

<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>

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.

Upvotes: 1

Related Questions