npm install ngx-mqtt --save

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  
  import { AppComponent } from './app.component';
  import { environment } from 'src/environments/environment';
  
  //MQTT
  import { IMqttServiceOptions, MqttModule } from "ngx-mqtt";
  
  const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
    hostname: environment.mqtt.server,
    port: environment.mqtt.port,
    protocol: (environment.mqtt.protocol === "wss") ? "wss" : "ws",
    path: '/mqtt'
  };
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule, FormsModule, ReactiveFormsModule,MqttModule.forRoot(MQTT_SERVICE_OPTIONS),
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

import { Injectable } from '@angular/core';
import { IMqttMessage, MqttConnectionState, MqttService, IMqttServiceOptions } from 'ngx-mqtt';
import { Observable } from 'rxjs';
import { formatHour } from '../helpers/date.helper';

@Injectable({
  providedIn: 'root'
})
export class MyMqttService {

  

  constructor(private ngxMqttService: MqttService) { 
  
  }

  public connect(host:string, port:number):Observable<MqttConnectionState>{
    const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
      hostname: host,
      port,
      protocol: "ws",
      path: '/mqtt'
    };
    this.ngxMqttService.connect(MQTT_SERVICE_OPTIONS);

    return this.ngxMqttService.state;
  }

  topic(topicName: string): Observable<IMqttMessage> {     
    return this.ngxMqttService.observe(topicName);
  }

  sendmsg(topicName:string, message:string): void {
    // use unsafe publish for non-ssl websockets
    this.ngxMqttService.unsafePublish(topicName, message, { qos: 2, retain: true })
    //qos: 0 como mucho una
    //qos: 1 como mínimo una
    //qos: 2 justo una
  }

}

  <main class="container" style="max-width: 600px">
  <div class="row" style="margin-top: 1rem">
    <h1>Cliente MQTT con Angular 13</h1>
    <details [open]="connectionDetailsElementOpen">
      <summary>DETALLES DE CONEXIÓN</summary>
      <form [formGroup]="connectionForm" (submit)="toConnect()">
        <label for="">
          Broker MQTT
          <input
            type="text"
            placeholder="Aquí el broker MQTT"
            formControlName="brokerHost"
          />
          <small>Por ejemplo public.mqtthq.com</small>
        </label>
        <label for="">
          Puerto
          <input
            type="number"
            placeholder="Aquí el puerto"
            formControlName="brokerPort"
          />
          <small>Por ejemplo 8083</small>
        </label>

        <button id="connectButtonDOMElement" type="submit" [disabled]="connectionForm.invalid" [class.secondary] = "connectionForm.invalid">
          CONECTAR
        </button>
      </form>
    </details>
    <details class="scale-in-center" [class.toHidden]="connectionDetailsElementOpen" open>
        <summary>DETALLES PARA ENVÍO DE MENSAJE</summary>
        <form [formGroup]="topicForm" (submit)="toSubcribeToTopic()">
            <label for="">
              Topic al que subscribirse
              <input
                type="text"
                placeholder="Aquí el topic"
                formControlName="mqttTopic"
              />
              <small>Por ejemplo /fjmduran/test</small>
            </label>           
            <button id="topicButtonDOMElement" type="submit" [disabled]="topicForm.invalid">
              SUBSCRIBIR
            </button>
          </form>
          <form [formGroup]="messageForm" (submit)="toSendMessage()" *ngIf="topicSub && !topicSub.closed">         
            <label for="">
              Mensaje a enviar
              <input
                type="text"
                placeholder="Aquí el mensaje"
                formControlName="mqttMessage"
              />
              <small>Por ejemplo Hola MQTT!</small>
            </label>
    
            <button type="submit" [disabled]="messageForm.invalid">
              ENVIAR
            </button>
          </form>
    </details>
  </div>
  <ul class="terminal">
    <li *ngFor="let message of mLog">{{message}}</li>
  </ul>
</main>

import { Component } from '@angular/core';
import {
  FormBuilder,
  FormControl,
  FormGroup,
  Validators,
} from '@angular/forms';
import { MqttConnectionState } from 'ngx-mqtt';
import { Observable, Subscription } from 'rxjs';
import { formatHour } from './helpers/date.helper';
import { MyMqttService } from './services/mqtt.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'Cliente MQTT con Angular 13';
  connectionForm: FormGroup;
  topicForm: FormGroup;
  messageForm: FormGroup;

  mLog: string[] = [];

  public mqttConnectionSub!: Subscription;
  public topicSub!: Subscription;
  private subs:Subscription[]=[];

  public connectionDetailsElementOpen = true;
  private connectButtonDOMElement: Element | null = null;
  private topicButtonDOMElement: Element | null = null;

  constructor(private fb: FormBuilder, private mqttService: MyMqttService) {
    this.connectionForm = this.fb.group({
      brokerHost: new FormControl('public.mqtthq.com', [Validators.required]),
      brokerPort: new FormControl(8083, [
        Validators.required,
        Validators.min(0),
        Validators.max(9999),
      ]),
    });
    this.topicForm = this.fb.group({
      mqttTopic: new FormControl('/fjmduran/test', [
        Validators.required,
        Validators.minLength(1),
      ]),
    });
    this.messageForm = this.fb.group({
      mqttMessage: new FormControl('Hola MQTT!', [
        Validators.required,
        Validators.minLength(1),
      ]),
    });
  }

  ngOnInit() {
    this.connectButtonDOMElement = document.getElementById('connectButtonDOMElement');
    this.topicButtonDOMElement = document.getElementById('topicButtonDOMElement');
    this.writeLog('https://fjmduran.com 🤓');
  }

  toConnect() {
    const hostName: string = this.connectionForm.get('brokerHost')?.value;
    const port: number = this.connectionForm.get('brokerPort')?.value;

    if (this.mqttConnectionSub && !this.mqttConnectionSub.closed) {
      this.mqttConnectionSub.unsubscribe();
      this.writeLog('🔴 CONEXIÓN CERRADA');
      this.changeConnectionStatus('desconectado');
      return;
    }
    this.mqttConnectionSub = this.mqttService
      .connect(hostName, port)
      .subscribe((connectionState: MqttConnectionState) => {
        switch (connectionState) {
          case MqttConnectionState.CLOSED:
            this.writeLog('CONEXIÓN CERRADA, REINTENTANDO...');
            this.changeConnectionStatus('esperando');
            break;
          case MqttConnectionState.CONNECTING:
            this.writeLog('CONECTANDO...');
            this.changeConnectionStatus('esperando');
            break;
          case MqttConnectionState.CONNECTED:
            this.writeLog('🟢 CONECTADO');
            this.changeConnectionStatus('conectado');
            break;
        }
      });
      this.subs.push(this.mqttConnectionSub);
  }

  private changeConnectionStatus(
    status: 'conectado' | 'esperando' | 'desconectado'
  ) {
    switch (status) {
      case 'esperando':
        this.connectionDetailsElementOpen = true;
        this.connectButtonDOMElement?.setAttribute('aria-busy', String(true));
        if (this.connectButtonDOMElement) {
          this.connectButtonDOMElement.innerHTML = 'CONECTANDO...';
          this.connectButtonDOMElement.className = 'secondary';
        }
        break;
      case 'desconectado':
        this.connectionDetailsElementOpen = true;
        this.connectButtonDOMElement?.setAttribute('aria-busy', String(false));
        if (this.connectButtonDOMElement) {
          this.connectButtonDOMElement.innerHTML = 'CONECTAR';
          this.connectButtonDOMElement.className = 'primary';
        }
        break;
      case 'conectado':
        this.connectionDetailsElementOpen = false;
        this.connectButtonDOMElement?.setAttribute('aria-busy', String(false));
        if (this.connectButtonDOMElement) {
          this.connectButtonDOMElement.innerHTML = 'DESCONECTAR';
          this.connectButtonDOMElement.className = 'secondary';
        }
        break;
    }
  }

  public toSubcribeToTopic(){
    const topic=this.topicForm.get('mqttTopic')?.value;
    if(this.topicSub && !this.topicSub.closed){
      this.topicSub.unsubscribe();
      this.writeLog(ELIMINADA SUBSCRIPCIÓN A topic);
      if (this.topicButtonDOMElement) {
        this.topicButtonDOMElement.innerHTML = 'SUBSCRIBIR';
        this.topicButtonDOMElement.className = 'primary';
      }
      return;
    } 
    this.topicSub= this.mqttService.topic(topic).subscribe(message=>{
      const messageUTF8=new TextDecoder('utf-8').decode(message.payload);
      console.log(messageUTF8);
      this.writeLog(RECIBIDO: messageUTF8 👈)
    });
    this.writeLog(SUBSCRITO AL TOPIC topic);
    if (this.topicButtonDOMElement) {
      this.topicButtonDOMElement.innerHTML = 'ELIMINAR SUBSCRIPCIÓN';
      this.topicButtonDOMElement.className = 'secondary';
    }
    this.subs.push(this.topicSub);
  }

  public toSendMessage(){
    const topic=this.topicForm.get('mqttTopic')?.value;
    const message=this.messageForm.get('mqttMessage')?.value;
    let logMessage='';
    if(!topic){      
      logMessage=Falta el topic;
      console.log(logMessage);
      this.writeLog(logMessage);
      return;
    }
    if(!message){
      logMessage=Falta el mensaje;
      console.log(logMessage);
      this.writeLog(logMessage);
      return;
    }
    this.mqttService.sendmsg(topic,message);
    this.writeLog(ENVIADO {message} AL TOPIC {topic} 👉)
  }

  private writeLog(message: string): void {
    const now = new Date();
    const writeMessage = formatHour(now) -> message;
    console.log(writeMessage);
    this.mLog.unshift(writeMessage);
  }

 

  ngOnDestroy() {
    this.subs.forEach(sub=>sub.unsubscribe());
  }
}