Posted on

Decorators and Mixins in Lightning Web Components

It's safe to say that every modern web application these days relies to some degree on three foundational web standards: HTML, CSS, and JavaScript. While HTML has largely stabilized since the HTML5 standard, both CSS and JavaScript continue to evolve to meet developers' and users' needs.

The evolving nature of these three technologies has lead to the introduction of web components, a cross-browser solution for building complex web apps. On top of this open source standard, Salesforce developed Lightning Web Components (LWC) as a fast, enterprise-grade wrapper around vanilla web components. The result is a thin, performant, and feature-packed framework built entirely on the open web.

Posted on

Handling Property Changes Using Decorator – an Alternative to ngOnChanges

Angular (2.0+)  provides a beautiful way of communicating with components using @Input and @Output decorators.   And, it also provides different lifecycle hooks to perform various tasks at different stages of the component. "ngOnChanges" is also one such lifecycle hooks that let you listen for any property changes and do custom actions or execute business logic. Below is the basic syntax of "ngOnChanges"

TypeScript
  




x


1 
@Component({
2 
  selector: 'app-component',
3 
  template: '<div>Say Hello to {{ name }}</div>'
4 
})
5 
class MyComponent implements OnChanges {
6 
  // TODO(issue/24571): remove '!'.
7 
  @Input() name!: number;
8 

          

          

           

            

             9
            

           

           
  ngOnChanges(changes: SimpleChanges) {

          

          

           

            

             10
            

           

           
    

          

          

           

            

             11
            

           

           
  }

          

          

           

            

             12
            

           

           
}

          

         

        

       

      

     

     

      

     

     

      

       

      

     

    

   

  

 




The problems with "ngOnChanges" are: