angular 4 reduce html content

Question

I have a (grid) component witch is used many times. The problem is it is to large, and it's ~70% could be dynamically generated - I think, but there are many way to solve, which is the best?

The html file:

<div class="items containerX" fxLayout="column" fxFlexFill>

    <!--Operations-->
    <div class="operations">
        <div class="mobile-operations" fxShow.xs="true" fxHide.gt-xs="true">
            <div fxLayout="row" fxFlex>
                <div fxFlex="90" class="buttons">
                    <button type="button" class="adminButton" (click)="onAdd();">
                        <span class="fa fa-plus"></span> Add
                    </button>

                    <button type="button" class="adminButton" (click)="onDelete();" [disabled]='!hasSelectedSong'>
                        <span class="fa fa-times"></span> Remove
                    </button>

                    <button type="button" class="adminButton" (click)="onEdit();" [disabled]='!hasSelectedSong'>
                        <span class="fa fa-edit"></span> Edit
                    </button>
                </div>

                <div fxFlex="10" class="buttons" (click)="searchToggle = !searchToggle;" >
                    <span class="fa fa-search fa-lg searchButton"></span>
                </div>
            </div>

            <div class="searchbar" *ngIf="searchToggle" fxFlex fxHide.gt-xs="true">
                <form [formGroup]="simpleForm" fxFlex>
                    <input class="searchfield" type="text" placeholder="..." formControlName="simple" fxFlex>
                </form>
            </div>
        </div>

        <div class="operations" fxLayout="row" fxHide.lt-sm="true">
            <div fxFlex class="buttons">
                <button type="button" class="adminButton" (click)="onAdd();">
                    <span class="fa fa-plus"></span> <span fxHide.lt-md="true"> Add</span>
                </button>

                <button type="button" class="adminButton" (click)="onDelete();" [disabled]='!hasSelectedSong'>
                    <span class="fa fa-times"></span> <span fxHide.lt-md="true"> Remove</span>
                </button>

                <button type="button" class="adminButton" (click)="onEdit();" [disabled]='!hasSelectedSong'>
                    <span class="fa fa-edit"></span> <span fxHide.lt-md="true"> Edit</span>
                </button>
            </div>

            <div fxFlex class="buttons">
                <button type="button" class="adminButton" (click)="paginator.first()">
                    <span class="fa fa-caret-left"></span>
                    <span class="fa fa-caret-left"></span>                
                    <span fxHide.lt-md="true">First</span>
                </button>

                <button type="button" class="adminButton" (click)="paginator.prev()">
                    <span class="fa fa-caret-left"></span>
                    <span fxHide.lt-md="true">Prev</span>
                </button>

                <span class="page-number">{{paginator.page}}</span>

                <button type="button" class="adminButton" (click)="paginator.next()">
                    <span fxHide.lt-md="true">Next</span>
                    <span class="fa fa-caret-right"></span>
                </button>

                <button type="button" class="adminButton" (click)="paginator.last()">
                    <span fxHide.lt-md="true">Last</span>
                    <span class="fa fa-caret-right"></span>
                    <span class="fa fa-caret-right"></span>                
                </button>
            </div>

            <div fxFlex class="buttons">
                <form [formGroup]="simpleForm">
                    <input class="globalSearch" type="text" placeholder="..." formControlName="simple">

                    <button type="button" (click)="onSearch();" class="searchButton">
                        <span class="fa fa-search"></span>
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="itemView">
        <!--Header-->
        <div class="header" fxLayout="row" [ngClass.xs]="{'search-open' : searchToggle, 'mobile-header' : true}">
            <div fxFlex="100px" fxFlex.lt-sm="75px">
                <span class="fa fa-hashtag" aria-hidden="true" (click)="paginator.reset()"></span>
            </div>

            <div fxFlex>
                <div fxFlex="75px" fxHide.lt-sm="true" [ngClass]="{'sortBy' : sort == 'code'}">
                    <span class="item" (click)="onSortBy('code');">
                        Type <span *ngIf="sort == 'code'" class="fa" [ngClass]="getDirection('code')"></span>
                    </span>
                </div>

                <div fxFlex [ngClass]="{'sortBy' : sort == 'artist'}">
                    <span class="item" (click)="onSortBy('artist');">
                        Level <span *ngIf="sort == 'artist'" class="fa" [ngClass]="getDirection('artist')"></span>
                    </span>
                </div>

                <div fxFlex [ngClass]="{'sortBy' : sort == 'title'}">
                    <span class="item" (click)="onSortBy('title');">
                        Stat <span *ngIf="sort == 'title'" class="fa" [ngClass]="getDirection('title')"></span>
                    </span>
                </div>

                <div class="listLast" fxFlex="30px" fxHide.lt-sm="true"></div>
            </form>
        </div>

        <!--items-->
        <div class="items dd-list">
            <div class="item" fxLayout="row" *ngFor="let item of items; let i = index;" [ngClass.xs]="{'search-open' : searchToggle}">
                <div class="listFirst" scope="row" fxFlex="100px" fxFlex.lt-sm="75px">
                    <span fxFlex="25px" class="form-check-label adminCheckbox tools" (click)="selectItem(item._id);">
                        <i class="fa" aria-hidden="true" [ngClass]="{'fa-check-square': isSelected(item._id), 'fa-square': !isSelected(item._id)}"></i>
                    </span>

                    <span class="index" fxFlex>{{(i+1*paginator.page)}}</span>

                    <span class="tools" fxFlex="25px">
                        <a fxHide.lt-sm="true" (click)="onEdit(item._id)" class="fa fa-edit" aria-hidden="true"></a>
                    </span>
                </div>

                <div fxFlex>
                    <div class="listMiddle" fxFlex="75px" fxHide.lt-sm="true">{{item.type}}</div>
                    <div class="listMiddle artist" fxFlex title={{item.level}}>{{item.level}}</div>
                    <div class="listMiddle title" fxFlex title={{item.stats}}>{{item.stats | json}}</div>
                </div>

                <div class="tools listLast" fxFlex="30px" fxHide.lt-sm="true">
                    <a fxHide.lt-sm="true" (click)="onDelete(item._id);" class="fa fa-times " aria-hidden="true"></a>
                </div>
            </div>
        </div>
    </div>
</div>

<!--Popups-->
<popup name="removeItemAlert" type="alert">
    <div popup-body>
        Are you sure?
    </div>
</popup>

As you can see I only have to change the columns name, search input names, items fields and dom element attributes (class, fxFlex) - to be responsive. What is the best practice (separated components, template, directive) to compress the content, but keep easily usable?

(The number fields of the item object varies).

Additional info:

Basic methods implemented in ItemsComponent, and this way I can overwrite them is required.

    import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import {
FormGroup,
FormControl,
Validators,
FormBuilder,
FormArray
} from "@angular/forms";

import { 
    StorageService, 
    SystemService, 
    RequestService, 
    PopupService,
    PaginatorService
} from '../_shared';

import {
    ItemsComponent
} from '../_generals';

@Component({
selector: 'app-basic-characters',
templateUrl: './basic-characters.component.html',
styleUrls: ['./basic-characters.component.scss'],
providers: [PaginatorService]
})
export class BasicCharactersComponent extends ItemsComponent implements OnInit {
    public item: string = "basicCharacters";
    public class: string = 'BasicCharactersComponent';

    constructor( 
        router:  Router, 

        paginator: PaginatorService,
        popup:   PopupService,
        storage: StorageService,
        request: RequestService
    ) {
        super(router, paginator, popup, storage, request);
    }

    public ngOnInit() {
        super.ngOnInit();

        // console.log('child init');
    }

    public newSearchForm(){
        return new FormGroup({
            'type': new FormControl(''),
            'level': new FormControl(''),
            'stats': new FormControl(''),
        });
    }

    public newSimpleForm(){
        return new FormGroup({
            'simple': new FormControl('')
        });
    }
}

Answer 1

This section of code appeared twice. As @ken mentioned before, if you have a component (for example named button-group), then you can reuse this component by defining different functions within the component.

        <div fxFlex="90" class="buttons">
            <button type="button" class="adminButton" (click)="onAdd();">
                <span class="fa fa-plus"></span> Add
            </button>

            <button type="button" class="adminButton" (click)="onDelete();" [disabled]='!hasSelectedSong'>
                <span class="fa fa-times"></span> Remove
            </button>

            <button type="button" class="adminButton" (click)="onEdit();" [disabled]='!hasSelectedSong'>
                <span class="fa fa-edit"></span> Edit
            </button>
            </div>