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

import { RouterModule, Routes } from '@angular/router';

import { EditArticleComponent } from './components/articles/edit-article/edit-article.component';

import { ListArticlesComponent } from './components/articles/list-articles/list-articles.component';

import { ReadArticleComponent } from './components/articles/read-article/read-article.component';

const routes: Routes = [

  { path: 'list', component: ListArticlesComponent },

  { path: 'edit', component: EditArticleComponent },

  { path: 'read/:id', component: ReadArticleComponent },

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule {

 }

<a href="/read/{{article.idArticle}}" >

<style>

  .listpad_items {

    width: 100%;

    display: block;

    padding: 2px;

    margin-top: 4px;

    box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%), 0 0 0 1px rgb(0 0 0 / 10%);

    border-radius: 4px;

    outline: none;

    background-color: rgba(255, 255, 255, 1);

  }

  .link_item {

    text-decoration: none;

  }

  .item_title {

    text-align: left;

    font-size: large;

    padding: 2px;

  }

</style>

<p>list-articles</p>

<div *ngFor="let article of articles" class="listpad_items">

  <a href="/read/{{article.idArticle}}" title="{{article.title}}" class="link_item">

    <div>

      <table>

        <tr>

          <td>

            <div>idArticle: {{article.idArticle}} </div>

          </td>

          <td>

            <div class="item_title">title: {{article.title}} </div>

          </td>

        </tr>

        <div>text: {{article.text}} </div>

      </table>

    </div>

  </a>

</div>