JAVASCRIPT

Make a card dynamic with Angular JS

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.demos = [{
        paragrafo: 'richiesta',
        title: 'demo1',
        paragrafo2: 'dskjdfdjfdfjkdf',
        link: 'https://www.google.it',
      },
      {
        paragrafo: 'richiesta',
        title: 'demo2',
        paragrafo2: 'dfhfhfjgfkjghfjkgf',
        link: 'https://www.youtube.it',
      },
      {
        paragrafo: 'richiesta',
        title: 'demo3',
        paragrafo2: 'sjdsdjddfjdf',
        link: 'https://www.sportmediaset.it',
      },
      {
        paragrafo: 'richiesta',
        title: 'demo4',
        paragrafo2: 'sdjkdhdkjfhdjfh',
        link: 'https://www.elbocon.pe',
      },
    ];
  }])
  .component('card', {
    bindings: {
      demo: '<'
    },
    template: '<div class="card" style="width: 18rem"><div class="card-body"><p>{{$ctrl.demo.paragrafo}}</p><h5 class="card-title">{{$ctrl.demo.title}}</h5><h6 class="card-subtitle mb-2 text-muted"></h6><p class="card-text">{{$ctrl.demo.paragrafo2}}</p><a class="card-link">{{$ctrl.demo.link}}</a></div></div>'
  })
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <card demo="data" ng-repeat="data in demos">
  </card>
</div>