Angular Error when changing status, communication between Components via service

Question

can help me:

Error: Expressionchangedafterhasbeencheckederror: Expression has changed after it was checked. Previous value for 'attr.Aria-describedby': 'msg-default'. Current value? 'id-0'

I am using a service to take the id of the component "app-msg-error" and pass to the input attribute of the "app-radio-button" Component, this passing OK, but on the console I am getting the error above.

Next thing you know: service error.

``
    export class MsgErrorService {
    
    private _msgError = new BehaviorSubject<string>('msg-defaut');
    
    currentMsg = this._msgError.asObservable();
    
    constructor() {}
    
    changeError(msg: string) {
      this._msgError.next(msg);
    }

``

Code of the Commission

`` 
        export class ErrorComponent implements OnInit {
        
        constructor(private msgErrorService: MsgErrorService) {}
        
        @Input()
        @HostBinding(attr.id)
        errorMsgId: `msg-erro-${id++}`
        }
    
    ngOnInit(){
     this.msgErrorService.changeError(this.errorMSgId);
    }
    
    ``

Answer 1

researching found two solutions.

one would pass the line below inside the constructor option 1

 constructor(private msgErrorService: MsgErrorService) {
    this.msgErrorService.changeError(this.errorMSgId);
 }

And/or use an if and check the variable that receives the ID, option 2

export class ErrorComponent implements OnInit {
        
        constructor(private msgErrorService: MsgErrorService) {}
        
        @Input()
        @HostBinding(attr.id)
        errorMsgId: `msg-erro-${id++}`
        }
    
    ngOnInit(){
     if(this.errorMsgId) {
        this.msgErrorService.changeError(this.errorMSgId);
     }
     
    }
   }