We Keep Coding

not set property value on div with javascript in angular

I need to set these properties when click on the div in angular with javascript:
maximunWidth() {
var parentDiv = document.querySelector(".cadr");
parentDiv.setAttribute("width",(this.size.width - 2).toString());
parentDiv.setAttribute("height",(this.size.height - 41).toString());
}
and this is my html code :
<div id="cadr" class="cadr col-md-6 col-xl-6 col-sm-12 col-lg-6"></div>
<div class="minmize" (click)="maximunWidth()"></div>
What's the problem? how can I solve this problem?

It is not recommended to change the dom element directly you can use ngStyle
directive
template
<div id="cadr" class="cadr col-md-6 col-xl-6 col-sm-12 col-lg-6"
[ngStyle]="{'width.px':width ,'height.px':height }"></div>
<div class="minmize" (click)="maximunWidth()"></div>
component
public width = 'initial'; // 👈 default value
public height = 'initial'; // 👈 default value
public maximunWidth() {
this.width = this.size.width - 2;
this.height = this.size.height - 41;
}

Try to avoid accessing the html elements directly. The whole point of Angular is (very much simplified) to take care of the DOM for you.
Instead of setting attributes directly let Angular take care of this for you:
<div id="cadr" class="cadr col-md-6 col-xl-6 col-sm-12 col-lg-6"
[ngStyle]="{'width': calculatedWidth, 'height': calculatedHeight}"></div>
<div class="minmize" (click)="maximunWidth()"></div>
And populate these values with the computed values in your typescript:
maximunWidth() {
this.calculatedWidth = ...;
this.calculatedHeight = ...;
}

<div id="cadr" class="cadr col-md-6 col-xl-6 col-sm-12 col-lg-6" [style.width]="widthDiv+'%'" [style.height]="heightDiv+'%'"></div>
<div class="minmize" (click)="maximunWidth()"></div>
or,
<div id="cadr" class="cadr col-md-6 col-xl-6 col-sm-12 col-lg-6" [style.width]="widthDiv+'px'" [style.height]="heightDiv+'px'"></div>
<div class="minmize" (click)="maximunWidth()"></div>
.ts
public maximunWidth() {
this.widthDiv= this.size.width - 2;
this.heightDiv= this.size.height - 41;
}

In your way of implementation whenever you click it will decrease the dimesion of that div tag. Try using property binding.
cssClass = 'oldSize'
maximunWidth() {
this.cssClass = 'newSize'
}
In your html
<div id="cadr" [class]=" 'cadr ' + 'col-md-6 ' + 'col-xl-6 ' + 'col-sm-12 ' + 'col-lg-6 ' + cssClass"></div>
<div class="minmize" (click)="maximunWidth()"></div>

Appending ng-repeat into HTML element dynamically

I trying to append ng-repeat into my HTML div on load.
It recognizes the ng-repeat, however the index value isn't displaying as it should
HTML
<div id="myInnerCarousel"></div>
controller:
var myCarousel = document.getElementById('myInnerCarousel');
var newItem = document.createElement("div");
newItem.setAttribute("class","item");
var newData = document.createElement("div");
newData.setAttribute("class", "col-xs-6 col-sm-6 col-md-3 col-lg-3");
newData.setAttribute("ng-repeat", "mat in " + arr);
//Create individual values seperately
var newMaterialName = document.createElement("h4");
var nameNode = document.createTextNode("{{mat.Name}}");
newMaterialName.appendChild(nameNode);
//Append everything together
newData.appendChild(newMaterialName);
newItem.appendChild(newData);
myCarousel.appendChild(newItem);
However the result is this:
https://gyazo.com/00b76c6b910d4c6701059d404783f720
It got the right idea of displaying my array, however angular isn't displaying h4 right.
EDIT: imtrying to achieve this in my html:
<div ng-controller="myController">
<div class="item">
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3" ng-repeat="mat in array1">
<h4>{{mat.Name}}</h4>
</div>
</div>
<div class="item">
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3" ng-repeat="mat in array2">
<h4>{{mat.Name}}</h4>
</div>
</div>

Lets simply state that this is not the way to do it.
A better and more angular way would be (assuming your apps name is app).
HTML
<div ng-controller="myController">
<div class="item">
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3" ng-repeat="mat in array">
<h4>{{mat.Name}}</h4>
</div>
</div>
</div>
Angular Controller
angular.module('app').controller('myController', function($scope) {
$scope.array = [{Name: 'abc'}, {Name: 'def'}]; // or whatever your data looks like.
});

Dynamically added component should be compiled using angular. you can use $compile function of angular. Below is working code.
Jsfiddle
function TodoCtrl($scope, $compile) {
$scope.arr = [{Name: "Dynamically Added cowermponent"}];
var myCarousel = document.getElementById('myInnerCarousel');
var newItem = document.createElement("div");
newItem.setAttribute("class","item");
var newData = document.createElement("div");
newData.setAttribute("class", "col-xs-6 col-sm-6 col-md-3 col-lg-3");
newData.setAttribute("ng-repeat", "mat in arr");
//Create individual values seperately
var newMaterialName = document.createElement("h4");
var nameNode = document.createTextNode("{{mat.Name}}");
newMaterialName.appendChild(nameNode);
//Append everything together
newData.appendChild(newMaterialName);
newItem.appendChild(newData);
myCarousel.appendChild(newItem);
$compile(newItem)($scope);
}

Angular animations: on click

I have a problem animating some elements in my Angular application.
There is a grid composed of cells (generated with a ng-repeat).
What I want to do is create a simple animation: on click, the cell should disappear (fadeOut effect for instance) and reappear after a while.
I've managed to do a fadeOut effect following this tutorial
Here is the code that manages the cells:
<div class="col col-20 cell" style="background-image:url('img/gray.png')">
<img class="cell-img" ng-src="{{cells[$index].getSrc()}}" width="100%" ng-click="click(cells[$index])" cell-click/>
</div>
<div class="col col-20 cell" style="background-image:url('img/gray.png')">
<img class="cell-img" ng-src="{{cells[$index + 1].getSrc()}}" width="100%" ng-click="click(cells[$index + 1])" cell-click/>
</div>
<div class="col col-20 cell" style="background-image:url('img/gray.png')">
<img class="cell-img" ng-src="{{cells[$index + 2].getSrc()}}" width="100%" ng-click="click(cells[$index + 2])" cell-click/>
</div>
<div class="col col-20 cell" style="background-image:url('img/gray.png')">
<img class="cell-img" ng-src="{{cells[$index + 3].getSrc()}}" width="100%" ng-click="click(cells[$index + 3])" cell-click/>
</div>
<div class="col col-20 cell" style="background-image:url('img/gray.png')">
<img class="cell-img" ng-src="{{cells[$index + 4].getSrc()}}" width="100%" ng-click="click(cells[$index + 4])" cell-click/>
</div>
</div>
app.controller("Control", function($scope, $interval, ...){
$scope.click = function(cell){
if($scope.gameStarted){
if(cell.isActive){
if(colorOk){
// ...
}
else{
// ...
}
}
}
}
}

You can use $timeout to make the cell reappear after a certain time after you hide it.
Something like:
$timeout(function () {
//code to make the cell appear/show the cell (maybe by removing ng-hide class)
}, 1000);

Script not flowing to first div only

Below is a script used to grab and spit out some of our data. The way it works is we create a variable then send it to the div id's located below.
function loadPregame() {
$.ajaxSetup({ cache: false });
$.getJSON("_schedule_" + seasontype + ".json",
function(data){
var game = data.gscd.g;
var status = game[gamenum].st;
//home team top nav
var homeTeamTop='<div class="homelogo col-md-5 col-sm-6 col-xs-12 pull-left">';
homeTeamTop+='<img src="logos/' + game[gamenum].h["ta"] + '.png" class="img-responsive" />';
homeTeamTop+='</div>';
homeTeamTop+='<div class="col-md-7 col-sm-6 col-xs-6 scorepad">';
homeTeamTop+='<span class="record score">' + game[gamenum].h["re"] + '</span>';
//homeTeam+='<br /><span id="homerank" class="rank"></span>';
homeTeamTop+='</div>';
// HOME TEAM
var homeTeam='<div class="homelogo col-md-5 col-sm-6 col-xs-12 pull-left">';
homeTeam+='<img src="logos/' + game[gamenum].h["ta"] + '.png" class="img-responsive" />';
homeTeam+='</div>';
homeTeam+='<div class="col-md-7 col-sm-6 col-xs-6 scorepad">';
homeTeam+='<span class="record score">' + game[gamenum].h["re"] + '</span>';
//homeTeam+='<br /><span id="homerank" class="rank"></span>';
homeTeam+='</div>';
// VISITOR TEAM
var visTeam='<div class="awaylogo col-md-5 col-sm-6 col-xs-12 pull-right">';
visTeam+='<img src="logos/' + game[gamenum].v["ta"] + '.png" class="img-responsive" />';
visTeam+='</div>';
visTeam+='<div class="col-md-7 col-sm-6 col-xs-12 scorepad pull-left">';
visTeam+='<span class="record score">' + game[gamenum].v["re"] + '</span>';
//visTeam+='<br /><span id="visrank" class="rank"></span>';
visTeam+='</div>';
document.getElementById("homeTeamTop").innerHTML=homeTeamTop;
//document.getElementById("visTeamTwo").innerHTML=visTeamTwo;
document.getElementById("visTeam").innerHTML=visTeam;
document.getElementById("homeTeam").innerHTML=homeTeam;
});
} //end function
What I can't seem to figure out is why the homeTeamTop won't proceed to my "HomeTeamTop" div. The others, which come after in progress have no issue. I've tried changing up the variable names and even redoing each manually. I then tried using the same info in the variables that work, but to no avail. <div id="visTeam"></div> and <div id="homeTeam"></div> which come next in progression print just fine. Is there a var_dump function as in PHP that I can use to see what's being rendered for homeTeamTop?
<div id="homeTeamTop"></div>
<div id="visTeam"></div>
<div id="homeTeam"></div>

Instafeed.js doesn't show images on page

I trying to use instafeed.js for my local site. But I don't understand why images from my account don't show?
My code
Connected instafeed.js and file where I write the script
<script type="text/javascript" src="js/instafeed.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
Section for images
<section class="instagram-wrap">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="instagram-content">
<h3>Latest Photos</h3>
<div class="row photos-wrap">
<div id="inst"></div>
</div>
</div>
</div>
</div>
</div>
</section>
and app.js with instafeed value
$(function() {
var feed = new Instafeed({
get: 'user',
userId: ID,
accessToken: 'Token',
target: 'inst',
links: true,
limit: 8,
useHttp: true,
sortBy: 'most-recent',
resolution: 'standard_resolution',
template: '<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="photo-box">
<div class="image-wrap">
<img src="http:{{image}}"/>
</div>
<div class="description">{{caption}} </div>
</div>
</div>'
});
feed.run();
});

Your code works except for this error regarding your template definition:
SyntaxError: unterminated string literal
Put all the template in one line or use \ at the end of each line to have a multi-line string literal.

Try write the template parameter inline like this:
template: '<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><div class="photo-box"><div class="image-wrap"><img src="http:{{image}}"/></div><div class="description">{{caption}} </div></div></div>'
or on line break insert \