+ Start a Discussion
Luciano RobertoLuciano Roberto 

Show all Toasts on the list

Folks,
I'm configuring the toast, where a list of alerts will be shown, but instead of showing multiple toasts, it is showing only the last one on the list. How do I resolve this issue?

Follow the code

TestAlert.cmp

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride,lightning:backgroundUtilityItem" access="GLOBAL" controller="AlertController">   

    
<aura:attribute name="html" type="String" />
<aura:attribute name="showToast" type="boolean" default="false"/>
       
<aura:attribute name="Alert" type="Alert__c" default="{'sobjectType': 'Alert__c',
                         'Tipo_de_Alerta__c': '',
                         'Name': '',
                         'Alerta1__c': ''
                          }"/>
    
    
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<aura:if isTrue="{!v.showToast}">    
    
<div class="demo-only" style="height: 4rem;">
	<div class="slds-notify_container slds-is-relative">    
		<div aura:id="alerta" role="status"> 
	         <div  class="slds-notify__content">

<h2 class="slds-text-heading_small ">                
     <aura:unescapedHtml value="{!v.html}" />  
</h2>
    
                
                
<lightning:buttonIcon iconName="utility:close" variant="bare" alternativeText="Close"
 iconClass="{!v.type == 'warning' ? 'light' : 'dark'}" size="small"
 class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse"
 onclick="{!c.close}"/>      
    
			</div>
		</div>
	</div>
</div>
    </aura:if>
    
</aura:component>
 

TestAlertController.js

({


   doInit : function(component, event, helper)
    {

        
  var action = component.get( "c.getMsgs" ); 

         action.setCallback(this, function(response) 
                           {                               
                               var state = response.getState();
                               
                               if(state == 'SUCCESS')
                               {                                   
                                   var alertMsgList = response.getReturnValue();
                                   
                                   if(alertMsgList.length > 0)
                                   {
                                       
                                       component.set("v.showToast", true);
                                       var tipoAlerta = component.find( "alerta" );        
                                              $A.util.addClass( tipoAlerta, "slds-notify" );
                                              $A.util.addClass( tipoAlerta, "slds-notify_toast" );  
                                       
                                       
                                   }
                                   
                                   
                                   for(var i = 0; i < alertMsgList.length; i ++) 
                                   {                                       
                                       var alerta = alertMsgList[ i ].Alerta1__c;
                                       var tipo = alertMsgList[ i ].Tipo_de_Alerta__c;
                                       var titulo = alertMsgList[ i ].Name;                                       
                                       
                                          
                                       
if	(tipo == 'success')     
            {
                 
// Successs        
     $A.util.addClass( tipoAlerta, "slds-theme_success" );
     component.set("v.html",alerta);  
                
                
            }
                                       
                                       
if	(tipo == 'Info')     
            {   
        
// Info 
     $A.util.addClass( tipoAlerta, "slds-theme_info" ); 
      component.set("v.html",alerta);  
            }


if	(tipo == 'error')     
            {    
// Error  
     $A.util.addClass( tipoAlerta, "slds-theme_error" );
				component.set("v.html",alerta);  
            }                                  
                        
                                       
if	(tipo == 'warning')     
            {                                       
// Warning 

     $A.util.addClass( tipoAlerta, "slds-theme_warning" );
     component.set("v.html",alerta);  
            }     
                                       
                                       
                                       
                                       
          }
     }
                               
                               
                               
                               
                          else {
                                   console.log("Failed with state: " + state);
                               }
                           }); 
        
        
        $A.enqueueAction(action);
        
  
        
    },

   
   close: function(cmp, event, helper) 
    {
    $A.util.addClass(cmp.find('alerta'), "slds-hide");
        
    },
   
   
       
    
})
 

 

Best Answer chosen by Luciano Roberto
Luciano RobertoLuciano Roberto
Thanks Raj Vakati  by help me.

I was able to solve the following, I did not need to put the ID in the DIV, instead I put the class directly bringing the alert type formatting in it

My code looks like this, if someone needs to:

Component.cmp
 
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride,lightning:backgroundUtilityItem,force:appHostable,flexipage:availableForAllPageTypes" access="GLOBAL" controller="AlertController"> 
    
    <aura:attribute name="html" type="List" />
    <aura:attribute name="showToast" type="boolean" default="false"/>

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
     
    <div>
	
        <aura:if isTrue="{!v.showToast}">
         <aura:iteration items="{!v.html}" var="lista">
                <div class="slds-notify_container slds-is-relative" id="{! 'divtoHide-'+lista.Name}">
                    <div class="{! 'slds-notify'+ ' ' +'slds-notify_toast'+ ' ' + 'slds-theme_'+''+lista.Tipo_de_Alerta__c}" role="status">
                     <lightning:icon iconName="{! 'utility:'+''+lista.Tipo_de_Alerta__c}" alternativeText="Info!" variant="inverse" class="slds-m-right_small"/>   
                     <div class="slds-notify__content">
                        <h2 class="slds-text-heading_small">{!lista.Alerta1__c}</h2>
                      </div>  
                      <div class="slds-notify__close">
                       <button id="{! lista.Name}" class="slds-button slds-button_icon slds-button_icon-inverse" title="Close" onclick="{!c.closeToast}">
                           <lightning:icon iconName="utility:close" alternativeText="Close" variant="inverse" />   
                       </button>
                      </div>  
                  </div>
	        	</div>
           </aura:iteration>  
        </aura:if>
            
        </div>
         
</aura:component>


Controller.js
({

    
    doInit : function(component, event, helper) {
        console.log('function loaded...');
		 var action = component.get("c.getMsgs");
        action.setCallback(this, function(response)
        {
            var state = response.getState();
            
         if(state == 'SUCCESS'){
                var alertMsgList = response.getReturnValue();
                var lista = [ ];
             
             if(alertMsgList.length > 0){
                component.set("v.showToast", true); 
             }

            for(var i = 0; i < alertMsgList.length; i ++){
                lista.push(alertMsgList[i]);
            }
         }else{
                
                 console.log("Failed with state: " + state);

            } 
            
                 component.set("v.html",lista);
          
        });
       $A.enqueueAction(action);  
	},
    
    
    
    closeToast : function(component, event, helper)
    {
        var whichOne = 'divtoHide-'+event.currentTarget.id;
        var elements = document.getElementById(whichOne);
        $A.util.toggleClass(elements, "slds-hide");
    },
    
})

 

All Answers

Raj VakatiRaj Vakati
That case change your code like this 

 1  : Change your attribute to accept the list of HTML alter messages 


<aura:attribute name="html" type="List" />

2. Create an array in JS controller  and set the value to above attribute at the end 

3. Use aura:iteration on the list collection .. 
Luciano RobertoLuciano Roberto
I could not understand item two, could you give me an example, please ..
 
Raj VakatiRaj Vakati
In javascript controller 
create an array like this 

var alters = []

push all the alters in var 

alters .push("Kiwi");
alters .push("Kiw1i");
alters .push("Kiwi2");

end set them in to the attribute 

and in markup iterate it 
Raj VakatiRaj Vakati
Let me know if you want me to write it for you 
Luciano RobertoLuciano Roberto

I'm sorry Raj, but I'm still learning as a programmer, it would be asking a lot if you could change my code with this information you're passing me. I can not do it.

Please.

Raj VakatiRaj Vakati
Give me complete code an
Luciano RobertoLuciano Roberto

TestAlert.cmp

----------------------------------------------------------------
 

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride,lightning:backgroundUtilityItem" access="GLOBAL" controller="AlertController">   
<aura:attribute name="html" type="List" />
<aura:attribute name="showToast" type="boolean" default="false"/>
<aura:attribute name="Alert" type="Alert__c" default="{'sobjectType': 'Alert__c',
                         'Tipo_de_Alerta__c': '',
                         'Name': '',
                         'Alerta1__c': ''
                          }"/>
    
    
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:if isTrue="{!v.showToast}">    
<div class="demo-only" style="height: 4rem;">
			<div class="slds-notify_container slds-is-relative">    
					<div aura:id="alerta" role="status">  
						<div  class="slds-notify__content">
<h2 class="slds-text-heading_small ">                
     <aura:unescapedHtml value="{!v.html}" />  
</h2>
<lightning:buttonIcon iconName="utility:close" variant="bare" alternativeText="Close"
 iconClass="{!v.type == 'warning' ? 'light' : 'dark'}" size="small"
 class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse"
 onclick="{!c.close}"/>      
    
						</div>
					</div>
			</div>
</div>
</aura:if>
    
</aura:component>



TestAlertController.js

----------------------------------------------------------------

 

({


   doInit : function(component, event, helper)
    {

        
  var action = component.get( "c.getMsgs" ); 

         action.setCallback(this, function(response) 
                           {                               
                               var state = response.getState();
                               
                               if(state == 'SUCCESS')
                               {                                   
                                   var alertMsgList = response.getReturnValue();
                                   
                                   if(alertMsgList.length > 0)
                                   {
                                       
                                       component.set("v.showToast", true);
                                        var tipoAlerta = component.find( "alerta" );        
                                              $A.util.addClass( tipoAlerta, "slds-notify" );
                                              $A.util.addClass( tipoAlerta, "slds-notify_toast" );  
                                       
                                       
                                   }
                                   
                                    
                                   
                                   for(var i = 0; i < alertMsgList.length; i ++) 
                                   {                                       
                                       var alerta = alertMsgList[ i ].Alerta1__c;
                                       var tipo = alertMsgList[ i ].Tipo_de_Alerta__c;
                                       var titulo = alertMsgList[ i ].Name;                                       
                                       
                                       
//component.set("v.Name", titulo);        
                                       
if	(tipo == 'success')     
            {
                 
// Successs        
     $A.util.addClass( tipoAlerta, "slds-theme_success" );
     component.set("v.html",alerta);  
                
                
            }
                                       
                                       
if	(tipo == 'Info')     
            {   
        
// Info 
     $A.util.addClass( tipoAlerta, "slds-theme_info" ); 
      component.set("v.html",alerta);  
            }


if	(tipo == 'error')     
            {    
// Error  
     $A.util.addClass( tipoAlerta, "slds-theme_error" );
				component.set("v.html",alerta);  
            }                                  
                        
                                       
if	(tipo == 'warning')     
            {                                       
// Warning 

     $A.util.addClass( tipoAlerta, "slds-theme_warning" );
     component.set("v.html",alerta);  
            }     
                                       
                                       
                                       
                                       
          }
     }
                               
                               
                               
                               
                          else {
                                   console.log("Failed with state: " + state);
                               }
                           }); 
        
        
        $A.enqueueAction(action);
        
          
    },

   
   close: function(cmp, event, helper) 
    {
    $A.util.addClass(cmp.find('alerta'), "slds-hide");
    },
   
   
    
})




 

TestAlertController.apxc

----------------------------------------------------------------

 

public class AlertController {
    
    
       
    
 @AuraEnabled
    public static List<Alert__c> getMsgs() {
        
        List<Alert__c> lst = new List<Alert__c>();
        lst = [select Tipo_de_Alerta__c, Name, Alerta1__c from Alert__c where Data_inicial__c <= :system.now() and Data_final__c >= :system.now()];
        return lst;
    }
    

    
}

 
Raj VakatiRaj Vakati
What I understand from the code is you need to show only one alert message ??  that what you are showing  
Luciano RobertoLuciano Roberto
Actually this is what is happening, but what I need is that it show multiple alerts (if any).
What I need is to check how many alerts are registered, to display them.
Raj VakatiRaj Vakati
I have a simple plan .. create a new field on the  Alert__c  object  ..that indicates the style class  ..lets consider the field name is 
Alert_style__c 

and use this code
public class AlertController {
    
    
       
    
 @AuraEnabled
    public static List<Alert__c> getMsgs() {
        
        List<Alert__c> lst = new List<Alert__c>();
        lst = [select Tipo_de_Alerta__c, Name, Alert_style__c  ,Alerta1__c from Alert__c where Data_inicial__c <= :system.now() and Data_final__c >= :system.now()];
        return lst;
    }
    

    
}

({


   doInit : function(component, event, helper)
    {
		var action = component.get( "c.getMsgs" ); 
		var newlst =[];

         action.setCallback(this, function(response) 
                           {                               
                               var state = response.getState();
                               if(state == 'SUCCESS')
                               {                                   
                                   var alertMsgList = response.getReturnValue();
                                   if(alertMsgList.length > 0)
                                   {
										component.set("v.showToast", true);
										var tipoAlerta = component.find( "alerta" );        
                                        $A.util.addClass( tipoAlerta, "slds-notify" );
                                        $A.util.addClass( tipoAlerta, "slds-notify_toast" ); 
										component.set("v.Alert",alertMsgList);										
                                   }
                                    
								}
                          else {
                                   console.log("Failed with state: " + state);
                               }
                           }); 
        
        
        $A.enqueueAction(action);
        
          
    },

   
   close: function(cmp, event, helper) 
    {
    $A.util.addClass(cmp.find('alerta'), "slds-hide");
    },
   
   
    
})
 
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride,lightning:backgroundUtilityItem" access="GLOBAL" controller="AlertController">   
<aura:attribute name="html" type="List" />
<aura:attribute name="showToast" type="boolean" default="false"/>
<aura:attribute name="Alert" type="Alert__c[]"/>
    
    
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:if isTrue="{!v.showToast}">    
<div class="demo-only" style="height: 4rem;">
			<div class="slds-notify_container slds-is-relative">    
					<div aura:id="alerta" role="status">  
						<div  class="slds-notify__content">
<h2 class="slds-text-heading_small ">   
 <aura:iteration items="{!v.Alert}" var="item">             
     <aura:unescapedHtml value="{!item.Tipo_de_Alerta__c}" />  
	 <aura:iteration/>
</h2>
<lightning:buttonIcon iconName="utility:close" variant="bare" alternativeText="Close"
 iconClass="{!v.type == 'warning' ? 'light' : 'dark'}" size="small"
 class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse"
 onclick="{!c.close}"/>      
    
						</div>
					</div>
			</div>
</div>
</aura:if>
    
</aura:component>

 
Luciano RobertoLuciano Roberto

You are concatenating alert messages in only one, when in fact you would have to show two alerts.
- Alert One
- Alert Two

User-added image

Raj VakatiRaj Vakati
try this .. you can break them using br 
 
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride,lightning:backgroundUtilityItem" access="GLOBAL" controller="AlertController">   
<aura:attribute name="html" type="List" />
<aura:attribute name="showToast" type="boolean" default="false"/>
<aura:attribute name="Alert" type="Alert__c[]"/>
    
    
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:if isTrue="{!v.showToast}">  
 <aura:iteration items="{!v.Alert}" var="item">             
  
<div class="demo-only" style="height: 4rem;">
			<div class="slds-notify_container slds-is-relative">    
					<div aura:id="alerta" role="status">  
						<div  class="slds-notify__content">
<h2 class="slds-text-heading_small ">   
     <aura:unescapedHtml value="{!item.Tipo_de_Alerta__c}" />  
</h2>
<lightning:buttonIcon iconName="utility:close" variant="bare" alternativeText="Close"
 iconClass="{!v.type == 'warning' ? 'light' : 'dark'}" size="small"
 class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse"
 onclick="{!c.close}"/>      
    
						</div>
					</div>
			</div>
</div>
	 <aura:iteration/>

</aura:if>
    
</aura:component>

 
Luciano RobertoLuciano Roberto

O Codigo está assim atualmente:

TestAlert.cmp

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride,lightning:backgroundUtilityItem" access="GLOBAL" controller="AlertController">   
<aura:attribute name="html" type="List" />
<aura:attribute name="showToast" type="boolean" default="false"/>
    
    
    
<aura:attribute name="Alert" type="Alert__c[]"/>
        
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:if isTrue="{!v.showToast}">   
    
<div class="demo-only" style="height: 4rem;">
			<div class="slds-notify_container slds-is-relative">    
					<div aura:id="alerta" role="status">  
						<div  class="slds-notify__content">
<h2 class="slds-text-heading_small ">                
  
    
<aura:iteration items="{!v.Alert}" var="item">             
     <aura:unescapedHtml value="{!item.Alerta1__c}" />  
    </aura:iteration>
<aura:iteration/>
    
    
    
</h2>
<lightning:buttonIcon iconName="utility:close" variant="bare" alternativeText="Close"
 iconClass="{!v.type == 'warning' ? 'light' : 'dark'}" size="small"
 class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse"
 onclick="{!c.close}"/>      
    
						</div>
					</div>
			</div>
</div>
</aura:if>
    
</aura:component>





TestAlertController.js

 

({


   doInit : function(component, event, helper)
    {

      var action = component.get( "c.getMsgs" ); 
		var newlst =[];

         action.setCallback(this, function(response) 
                           {                               
                               var state = response.getState();
                               if(state == 'SUCCESS')
                               {                                   
                                   var alertMsgList = response.getReturnValue();
                                   if(alertMsgList.length > 0)
                                   {
										component.set("v.showToast", true);
										var tipoAlerta = component.find( "alerta" );        
                                        $A.util.addClass( tipoAlerta, "slds-notify" );
                                        $A.util.addClass( tipoAlerta, "slds-notify_toast" ); 
										component.set("v.Alert",alertMsgList);										
                                   }
                                    
								}
                          else {
                                   console.log("Failed with state: " + state);
                               }
                           }); 
        
        
        $A.enqueueAction(action);
        
          
    },

   
   close: function(cmp, event, helper) 
    {
    $A.util.addClass(cmp.find('alerta'), "slds-hide");
    },
   
   
       
    
})
 



AlertController.apxc

 

public class AlertController {
    
    
       
    
 @AuraEnabled
    public static List<Alert__c> getMsgs() {
        
        List<Alert__c> lst = new List<Alert__c>();
        lst = [select Tipo_de_Alerta__c, Name, Alert_Style__c,  Alerta1__c from Alert__c where Data_inicial__c <= :system.now() and Data_final__c >= :system.now()];
        return lst;
    }
    

    
}

​​​​​​

Object with new field (Alert_Style__c)

User-added image
Luciano RobertoLuciano Roberto
Not to break the text, it needs to show two different alerts windows because there are two alerts records
Luciano RobertoLuciano Roberto

I need you to display two alerts, same as those here.
If you have 3, show 3 and so on.
You need to check the number of registered alert records

 

User-added image

Raj VakatiRaj Vakati
Got it .. change your code as below 

https://developer.salesforce.com/docs/component-library/bundle/force:showToast/documentation​​​​​​​
 
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride,lightning:backgroundUtilityItem" access="GLOBAL" controller="AlertController">   
<aura:attribute name="html" type="List" />
<aura:attribute name="showToast" type="boolean" default="false"/>
    
    
    
<aura:attribute name="Alert" type="Alert__c[]"/>
        
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
 
    
</aura:component>
 
({


   doInit : function(component, event, helper)
    {

      var action = component.get( "c.getMsgs" ); 
		var newlst =[];

         action.setCallback(this, function(response) 
                           {                               
                               var state = response.getState();
                               if(state == 'SUCCESS')
                               {                                   
                                   var alertMsgList = response.getReturnValue();
                                   if(alertMsgList.length > 0)
                                   {
										component.set("v.showToast", true);

										   for(var i = 0; i < alertMsgList.length; i ++) 
                                   {                                       
                                       var alerta = alertMsgList[ i ].Alerta1__c;
                                       var tipo = alertMsgList[ i ].Tipo_de_Alerta__c;
                                       var titulo = alertMsgList[ i ].Name;                                       
                                       
 	
										var toastEvent = $A.get("e.force:showToast");
										toastEvent.setParams({
											"title":titulo,
											"type":tipo
											"message": titulo
										});
										toastEvent.fire();
										
								   }
                                   }
                                    
								}
                          else {
                                   console.log("Failed with state: " + state);
                               }
                           }); 
        
        
        $A.enqueueAction(action);
        
          
    },

   
   close: function(cmp, event, helper) 
    {
    $A.util.addClass(cmp.find('alerta'), "slds-hide");
    },
   
   
       
    
})

 
Luciano RobertoLuciano Roberto
That's the way it has to work, though, I can not use that toast. I need to use HTML. The same is true from the beginning.
The alert must be by View, unfortunately. Requirement of my boss
 
Luciano RobertoLuciano Roberto
I have to use the same <aura: iteration> , but I'm not getting it.
Luciano RobertoLuciano Roberto

I was able to do the aura iteration and it is showing the alerts as they should, however for each alert it needs to have its own aura: id to be able to modify its individual behavior, such as alert type and the close button.
Here's the code below:

 

Alert.cmp


<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride,lightning:backgroundUtilityItem" access="GLOBAL" controller="AlertController">   

    
<aura:attribute name="html" type="List" />
    
    
<aura:attribute name="showToast" type="boolean" default="false"/>
    
  
    
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    
<aura:if isTrue="{!v.showToast}">
    
           <aura:iteration items="{!v.html}" var="lista">        
					<div class="demo-only" style="height: 4rem;">
		
   							 <div class="slds-notify_container slds-is-relative">    
				
        							<div aura:id="alerta" role="status">  <!-- THIS aura:id  MUST BE UNIQUE FOR EACH ALERT  -->
													<div  class="slds-notify__content">
                            
                                                                <h2 class="slds-text-heading_small ">                
                                                                     <aura:unescapedHtml value="{!lista}" />  
                                                                </h2>
                            
                                                    <lightning:buttonIcon iconName="utility:close" variant="bare" alternativeText="Close"
                                                     iconClass="{!v.type == 'warning' ? 'light' : 'dark'}" size="small"
                                                     class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse"
                                                     onclick="{!c.close}"/>      
    
													</div>
									</div>
							</div>
					</div>
			</aura:iteration>
    
    
    
    
    
</aura:if>
    
    
    
</aura:component>
 
Controller.js
-------------------------------------------------------------------

({

   doInit : function(component, event, helper)
    {
  var action = component.get( "c.getMsgs" );
        
        
         action.setCallback(this, function(response) 
                           {                               
                               var state = response.getState();
                               
                               if(state == 'SUCCESS')
                               {                                   
                                   var alertMsgList = response.getReturnValue();
                                   var lista = [ ];                                  
                                   
                                   
                                   if(alertMsgList.length > 0)
                                   {
                                       
                                       component.set("v.showToast", true);
                                              var tipoAlerta = component.find( "alerta" );        
                                              $A.util.addClass( tipoAlerta, "slds-notify" );
                                              $A.util.addClass( tipoAlerta, "slds-notify_toast" );  
                                                                       
                                   }
                                   
                       
                                   
                                   for(var i = 0; i < alertMsgList.length; i ++) 
                                   {                                       
                                       var alerta = alertMsgList[ i ].Alerta1__c;
                                       var tipo = alertMsgList[ i ].Tipo_de_Alerta__c;
                                       var titulo = alertMsgList[ i ].Name;                                       
                                       
                                      lista.push(alerta);
                         
                                       
      						       }
                                   
  									component.set("v.html",lista);                                  
     }
                               
                          else {
                                   console.log("Failed with state: " + state);
                               }
                           }); 
        
        
        $A.enqueueAction(action);
  
        
    },

   
   close: function(cmp, event, helper) 
    {
    $A.util.addClass(cmp.find('alerta'), "slds-hide");
    },
        
})
Luciano RobertoLuciano Roberto
Thanks Raj Vakati  by help me.

I was able to solve the following, I did not need to put the ID in the DIV, instead I put the class directly bringing the alert type formatting in it

My code looks like this, if someone needs to:

Component.cmp
 
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride,lightning:backgroundUtilityItem,force:appHostable,flexipage:availableForAllPageTypes" access="GLOBAL" controller="AlertController"> 
    
    <aura:attribute name="html" type="List" />
    <aura:attribute name="showToast" type="boolean" default="false"/>

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
     
    <div>
	
        <aura:if isTrue="{!v.showToast}">
         <aura:iteration items="{!v.html}" var="lista">
                <div class="slds-notify_container slds-is-relative" id="{! 'divtoHide-'+lista.Name}">
                    <div class="{! 'slds-notify'+ ' ' +'slds-notify_toast'+ ' ' + 'slds-theme_'+''+lista.Tipo_de_Alerta__c}" role="status">
                     <lightning:icon iconName="{! 'utility:'+''+lista.Tipo_de_Alerta__c}" alternativeText="Info!" variant="inverse" class="slds-m-right_small"/>   
                     <div class="slds-notify__content">
                        <h2 class="slds-text-heading_small">{!lista.Alerta1__c}</h2>
                      </div>  
                      <div class="slds-notify__close">
                       <button id="{! lista.Name}" class="slds-button slds-button_icon slds-button_icon-inverse" title="Close" onclick="{!c.closeToast}">
                           <lightning:icon iconName="utility:close" alternativeText="Close" variant="inverse" />   
                       </button>
                      </div>  
                  </div>
	        	</div>
           </aura:iteration>  
        </aura:if>
            
        </div>
         
</aura:component>


Controller.js
({

    
    doInit : function(component, event, helper) {
        console.log('function loaded...');
		 var action = component.get("c.getMsgs");
        action.setCallback(this, function(response)
        {
            var state = response.getState();
            
         if(state == 'SUCCESS'){
                var alertMsgList = response.getReturnValue();
                var lista = [ ];
             
             if(alertMsgList.length > 0){
                component.set("v.showToast", true); 
             }

            for(var i = 0; i < alertMsgList.length; i ++){
                lista.push(alertMsgList[i]);
            }
         }else{
                
                 console.log("Failed with state: " + state);

            } 
            
                 component.set("v.html",lista);
          
        });
       $A.enqueueAction(action);  
	},
    
    
    
    closeToast : function(component, event, helper)
    {
        var whichOne = 'divtoHide-'+event.currentTarget.id;
        var elements = document.getElementById(whichOne);
        $A.util.toggleClass(elements, "slds-hide");
    },
    
})

 
This was selected as the best answer