JSFiddle - React, Tailwind, and code Playground

by Sunny SM

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="MyApp">
    <div ng-controller="MyCtrl">
        <input type="text" ng-model="textToBroadcast" placeholder="Type text to broadcast">
        <button ng-click="broadcastEvent()">Click me to broadcast to the directive</button>
        <my-dir></my-dir>
        <hello-world user="{name:'Sunny Attwal'}"></hello-world>
    </div>
</div>

CSS

.mgn-top {
    margin-top:12px;
}

JavaScript

angular.module("MyApp", []).controller("MyCtrl", function ($scope) {
		$scope.textToBroadcast= "Sunny Attwal";
    $scope.broadcastEvent = function () {
        $scope.$broadcast("toggleAnimation",$scope.textToBroadcast );
    }
}).directive("myDir", function () {
    return {
        restrict : "E",
        template : "<div class='mgn-top'>The directive heard:  {{broadcastedText}}</div>",
        link : function (scope) {
            scope.$on("toggleAnimation", function (event, args) {
                scope.broadcastedText = args;
            });
        }
    };
}).component("helloWorld", {
      controller:myComponent,
      controllerAs:'obj',
			bindings:{ user:'<'},
      template: 'Hello {{obj.myName}} I\'m <strong> {{obj.user.name}} </strong><div data="attr_data" class="domI"></div><div ng-click="obj.msg()">View Data</div>',
      
 });
 function myComponent($timeout,$element,$attrs){
 		var ctrl = this;
    ctrl.$onInit= function(){
    	ctrl.myName= 'Pritika Arora';
      ctrl.usertype= 'admin';
    };
    ctrl.msg = function(){
    	console.log(524163);
    }
    ctrl.$onChanges= function(changes){
    	console.log("Sunny : " + JSON.stringify(changes));
    };
    $timeout(function(){
    	ctrl.myName= 'Rinki Saini';
      ctrl.usertype= 'User';
    },5000);
 		ctrl.$postLink= function(){
    	$element.find('div.domI').html("hi i am sunny");
      $element.find('div.domI').on('click',function(){
      	angular.element(this).css('color','red');
        console.log($attrs.user);
      });
    };
 }