Closing tags in html component angular

Question

For some reason Angulars is saying me that the close tags are wrong, and my page is now running for that errors, but I don't understand why, the close tags are fine I check tab for tab all the tags have one open tab and one close tags, I'm gone leave my code.

  <div class="container-fluid">
    <h6 class="h2 text-white d-inline-block mb-0 mr-4">Mi perfil</h6>
      <!-- Search form -->
      <!-- Navbar links -->
      <ul class="navbar-nav align-items-center  ml-md-auto ">
        <li class="nav-item d-xl-none">
          <!-- Sidenav toggler -->
          <div class="pr-3 sidenav-toggler sidenav-toggler-dark" data-action="sidenav-pin" data-target="#sidenav-main">
            <div class="sidenav-toggler-inner">
              <i class="sidenav-toggler-line"></i>
              <i class="sidenav-toggler-line"></i>
              <i class="sidenav-toggler-line"></i>
            </div>
          </div>
        </li>
        <li class="nav-item d-sm-none">
          <a class="nav-link" href="#" data-action="search-show" data-target="#navbar-search-main">
            <i class="ni ni-zoom-split-in"></i>
          </a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link" href="http://seth.com/dashboard" role="button" >
            <i class="fas fa-arrow-alt-circle-left"></i>
          </a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <!-- Signo pregunta -->
            <i class="far fa-question-circle"></i>
          </a>
          <!-- Signo pregunta  contenido-->

          <div class="dropdown-menu dropdown-menu-m  dropdown-menu-right  py-0 overflow-hidden">
            <!-- Dropdown header -->
            <!-- List group -->
            <div class="list-group list-group-flush">
              <a href="#!" class="list-group-item list-group-item-action">
                <div class="row align-items-center">
                  <div class="col-auto">
                    <!-- Icono + -->
                  </div>
                  <div class="col ml--2">
                    <p class="text-sm mb-0">Guía de inicio</p>
                  </div>
                </div>
              </a>

              <!-- Tarea -->
              <a href="#!" class="list-group-item list-group-item-action">
                <div class="row align-items-center">
                  <div class="col-auto">
                    <!-- Icono + -->
                  </div>
                  <div class="col ml--2">
                    <p class="text-sm mb-0">Políticas Privacidad</p>
                  </div>
                </div>
              </a>
              <!-- Element group -->
              <a href="#!" class="list-group-item list-group-item-action">
                <div class="row align-items-center">
                  <div class="col-auto">
                    <!-- Icono + -->
                  </div>
                  <div class="col ml--2">
                    <p class="text-sm mb-0">Contactar asistencia</p>
                  </div>
                </div>
              </a>

              <!-- Element group -->
              <a href="#!" class="list-group-item list-group-item-action">
                <div class="row align-items-center">
                  <div class="col-auto">
                    <!-- Icono + -->
                  </div>
                  <div class="col ml--2">
                    <p class="text-sm mb-0">Videocapacitaciones</p>
                  </div>
                </div>
              </a>

            </div>
          </div>

        </li>
      </ul>
      <ul class="navbar-nav align-items-center  ml-auto ml-md-0 ">
        <li class="nav-item dropdown">
          <a class="nav-link pr-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <div class="media align-items-center">
              <span class="avatar avatar-sm rounded-circle">
                <img alt="Image placeholder" src="../assets/img/theme/foto.jpg">
              </span>
              <div class="media-body  ml-2  d-none d-lg-block">
              </div>
            </div>
          </a>
          <div class="dropdown-menu  dropdown-menu-right ">
            <div class="dropdown-header noti-title">
              <h6 class="text-overflow m-0">Hola </h6>
            </div>
            <a href="/vistas/profile" class="dropdown-item">
              <i class="ni ni-single-02"></i>
              <span>Ajustes de mi perfil</span>
            </a>
            <a href="../admin.php" class="dropdown-item">
              <i class="ni ni-settings-gear-65"></i>
              <span>Consola de administrador</span>
            </a>
            <div class="dropdown-divider"></div>
            <a href="./seth/Plugins/login/php/logout.php" class="dropdown-item">
              <i class="ni ni-user-run"></i>
              <span>Cerrar sesión</span>
            </a>

Ok this tags is what angular is saying me that I need to remove, it is with the last code block.

        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

I closed the tags , but you have divs inside the links) replace with span, it will be more correct and set display:block in css

I recommend not using divs inside links . Replace with span.

see also

HTML:

<div class="container-fluid">
  <h6 class="h2 text-white d-inline-block mb-0 mr-4">Mi perfil</h6>
  <!-- Search form -->
  <!-- Navbar links -->
  <ul class="navbar-nav align-items-center  ml-md-auto ">
    <li class="nav-item d-xl-none">
      <!-- Sidenav toggler -->
      <div class="pr-3 sidenav-toggler sidenav-toggler-dark" data-action="sidenav-pin" data-target="#sidenav-main">
        <div class="sidenav-toggler-inner">
          <i class="sidenav-toggler-line"></i>
          <i class="sidenav-toggler-line"></i>
          <i class="sidenav-toggler-line"></i>
        </div>
      </div>
    </li>
    <li class="nav-item d-sm-none">
      <a class="nav-link" href="#" data-action="search-show" data-target="#navbar-search-main">
        <i class="ni ni-zoom-split-in"></i>
      </a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link" href="http://seth.com/dashboard" role="button">
        <i class="fas fa-arrow-alt-circle-left"></i>
      </a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <!-- Signo pregunta -->
        <i class="far fa-question-circle"></i>
      </a>
      <!-- Signo pregunta  contenido-->
      <div class="dropdown-menu dropdown-menu-m  dropdown-menu-right  py-0 overflow-hidden">
        <!-- Dropdown header -->
        <!-- List group -->
        <div class="list-group list-group-flush">
          <a href="#!" class="list-group-item list-group-item-action">
            <div class="row align-items-center">
              <div class="col-auto">
                <!-- Icono + -->
              </div>
              <div class="col ml--2">
                <p class="text-sm mb-0">Guía de inicio</p>
              </div>
            </div>
          </a>
          <!-- Tarea -->
          <a href="#!" class="list-group-item list-group-item-action">
            <div class="row align-items-center">
              <div class="col-auto">
                <!-- Icono + -->
              </div>
              <div class="col ml--2">
                <p class="text-sm mb-0">Políticas Privacidad</p>
              </div>
            </div>
          </a>
          <!-- Element group -->
          <a href="#!" class="list-group-item list-group-item-action">
            <div class="row align-items-center">
              <div class="col-auto">
                <!-- Icono + -->
              </div>
              <div class="col ml--2">
                <p class="text-sm mb-0">Contactar asistencia</p>
              </div>
            </div>
          </a>
          <!-- Element group -->
          <a href="#!" class="list-group-item list-group-item-action">
            <div class="row align-items-center">
              <div class="col-auto">
                <!-- Icono + -->
              </div>
              <div class="col ml--2">
                <p class="text-sm mb-0">Videocapacitaciones</p>
              </div>
            </div>
          </a>
        </div>
      </div>
    </li>
  </ul>
  <ul class="navbar-nav align-items-center  ml-auto ml-md-0 ">
    <li class="nav-item dropdown">
      <a class="nav-link pr-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <div class="media align-items-center">
          <span class="avatar avatar-sm rounded-circle">
            <img alt="Image placeholder" src="../assets/img/theme/foto.jpg">
          </span>
          <div class="media-body  ml-2  d-none d-lg-block">
          </div>
        </div>
      </a>
      <div class="dropdown-menu  dropdown-menu-right ">
        <div class="dropdown-header noti-title">
          <h6 class="text-overflow m-0">Hola </h6>
        </div>
        <a href="/vistas/profile" class="dropdown-item">
          <i class="ni ni-single-02"></i>
          <span>Ajustes de mi perfil</span>
        </a>
        <a href="../admin.php" class="dropdown-item">
          <i class="ni ni-settings-gear-65"></i>
          <span>Consola de administrador</span>
        </a>
        <div class="dropdown-divider"></div>
        <a href="./seth/Plugins/login/php/logout.php" class="dropdown-item">
          <i class="ni ni-user-run"></i>
          <span>Cerrar sesión</span>
        </a>
      </div>
    </li>
  </ul>
</div>