Angular 4 reduce html content

I have a (grid) component that is used many times. The problem is that it's big and ~ 70% of it could be dynamically generated - I guess, but there are many ways to decide which is better?

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 need to change the column name, search input names, element fields and dom element attributes (class, fxFlex) - so that they are responsive. What is the best practice (detached components, template, directive) for compressing content but can be easily used?

(The number of fields of the item object changes).

Additional Information:

Basic methods implemented in ItemsComponent so I can overwrite them.

    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('')
        });
    }
}