We Keep Coding

Custom class names for Material.io components

I am implementing Material.io for a web project, and looking to make the class names that are used by Material.io more project related. Currently 'mdc-' is pre-pended to each class and I would like to have this as something a bit more custom to the project.
(A simple code comparison added below).
Taking the Material.io default output of this:
<button class="mdc-button">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">Button</span>
</button>
And customising the block element class name to the following:
(company used as an example, the desired company name or abbreviation would be used in replace of this)
<button class="company-button">
<div class="company-button__ripple"></div>
<span class="company-button__label">Button</span>
</button>
Has anyone tried this? I am struggling to find a workaround and it might well be an indication that this is a bad idea.

Classic case of overthinking, I resolved my issue with a simple extend.
See example below:
#import "#material/chips/mdc-chips";
.company-chips {
#extend .mdc-chips;
}

Format <p> tags in Angular in desired way

I was working on a personal project where, I came across a situation where I have to take a large text input from user [Kind of like a reddit post or stackoverflow post].
I found out that by default tags do not preserve line breaks.
I solved this issue by using css [white-space: pre;]
Thanks to this post :
But what i need is to format the user entered text in a certain way , such that it would fit into a mat-card and also will be able to format code like ``` tags in stackOverflow.
<div class="zorroWrap">
<nz-card style="width:410px;" nzTitle="{{ article.title }}" [nzExtra]="extraTemplate" [nzActions]="[actionEllipsis , voteDisplay]">
<div class="angular-with-newlines">
<p align="justify">{{ article.desc }}</p>
</div>
</nz-card>
<ng-template #extraTemplate>
More
</ng-template>
<ng-template #actionEllipsis>
<i nz-icon nzType="ellipsis"></i>
</ng-template>
<ng-template #voteDisplay>
<i nz-icon [nzType]="'heart'" (click)="upVoteArticle()" [nzTheme]="'twotone'" [nzTwotoneColor]="'#eb2f96'"></i>
<i nz-icon nzType="ellipsis"> {{ article.votes }}</i>
</ng-template>
<div>
I am using ng-zorro.
I need the <p> tag's text formatted with preserved new lines [also an option to format code maybe like ``` or something] and the entire text should stay inside the card [should not overflow (I know i can do this using css, but would love to know if there is any better way)]
Thank You!
Edit:
Using css preserve's the new lines, as below:
I also found this post , which had sources of external libraries to pre format.
Any other Angular way? (which is maybe better)

I can't get my angular ui-router nested states to work. Code inside

I literally tried anything at this point, but I am still learning and can't get this to work.
https://plnkr.co/edit/FrNChlSwHYDbapr7gFQH?p=preview
<a class="collection-item"
ng-repeat="task in tasks"
ui-sref="todo.detail({ todoID: task.todoID })">
{{ task.text }}
</a>
What I am trying to do, is routing to /todo/1, /todo/2 and so on from the "todo"-view, but I seem to have a problem with the $stateParams.
It'd be nice if you guys could help me out and show me where my problem is :).

In addition to adding an id field to your task objects you will need to put a <section ui-view></section> in your todo.html file. This is how nested states work. You can use an href as Oliver mentioned or stick to the sref. I've forked your plunk here as an example.

Assuming each task in your array of tasks has an ID you want to then navigate to you're going to need something along the lines of:
<a class="collection-item"
ng-repeat="task in tasks"
ng-href="#todo/{{ task.todoID }}">
{{ task.text }}
</a>
You'll then need the /todo/:toDoId or something similar set up in your routes.

You have not defined todoID in your tasks items.
This works: https://plnkr.co/edit/Wk33w2eRfpz7UZNNZzFs?p=preview

AngularJs - Holding value of for loop string to use elsewhere

I've come a bit stuck in my angularjs project.
I run a for loop to query some nested JSON data and output it in 3 different variables inside an ng-repeat. So it makes up a title where i have the control over the elements that make up the title {{ number }} {{ shots }} {{ goals }}.
However, my knowledge of angularjs is stretched here because when I click on one of the events (from the ng-repeat list) it gives me a new tab, but I want to bring the title of that event to the new tab.
I can't call it as a scope variable as the last variable is still being held in there. I thought about assigning it as a new variable.. but was unsure how to actually do that in angularjs.
Here is the code i'm working with:
<li ng-repeat="event in events.events">
<div ng-if="actionType(event)" >
{{number}}
{{shots}}
{{goals}}
</div>
<a class="showPlayer" ng-click="showPlayer(event)">
View more stats
</a>
</li>
my angularjs is just a standard for loop which looks for values inside the js and assigns them as variables.
Any advice is very much appreciated.
EDIT: 24 hours later and I still can't crack this (very frustrating).
I'm not sure if there is a way to grab the string from the ng-click and clone that?
I don't want to have to run another check for the title when I already have the information, surely there is an 'angular' way to do this??

Please try this I am not sure but it might help you
<li ng-repeat="event in events.events">
<div ng-if="actionType(event)" >
{{event.number}}
{{event.shots}}
{{event.goals}}
</div>
<a class="showPlayer" ng-click="showPlayer(event.number,event.shots,event.goals)">
View more stats
</a>
</li>

Try using $rootScope.
Define a rootscope variable where event is handled and write your title in html like you did. {{title}}
$rootScope.title = "example";

One way binding + dynamic binding in AngularJS

I will start by explaining what we are trying to achieve.
We have just jumped on the Angular bandwagon and are building a prototype with it to see what it is capable of.
Currently there is a load of data (grades in this case) on the server and we display that data using Angular.
The following is the code we use:
<ul class="phones">
<li class="list-group-item" onclick="toggleExpandedView(this, true, 500)" ng-repeat="grade in grades | filter:query | orderBy:orderProp">
<span ng-show="grade.comment"><img src="../Content/images/comment.gif"/></span>
<a class="btn btn-primary editButton" style="float: right; position: absolute; right:10px;" ng-href="#/grades/{{grade.gradeId}}">Edit</a>
<div class="heading1"><a ng-href="{{grade.url}}" target="_blank">{{grade.gradeValue}}</a></div>
<div>Provided by {{grade.assessorFirstname}} {{grade.assessorLastname}} on {{grade.dateModifiedFormatted}} </div>
<div class="expandedGrade" onclick="childDivClick(event)" style="display: none" id="grade-{{grade.gradeId}}">
<label>Attachments</label>{{grade.attachmentCount}}
<br />
<span ng-hide="editing" ng-click="editing = true"><b>{{grade.comment || 'No comments yet'}}</b></span>
<form ng-show="editing" ng-submit="editing = false">
<input type="text" ng-model="grade.comment" placeholder="Comment" ng-required />
<br />
<input id="saveChanges" type="submit" class="btn btn-primary" ng-click="saveChanges(this, grade)" text="Save changes" />
</form>
</div>
</li>
</ul>
As you can see we have a parent ul and for each grade in grades we simply display a li and a div that is hidden and when you click on the li we use jQuery to animate and display the hidden div. In the child div we have a comments field which users can update and click save. On save the current object gets fired back to the server however we are concerned about the fact that Angular has to go through all 2000 grades until it finds the one we are updating (due to two way binding) and this means that everything will be really slow and we cannot afford that.
This is what we want to achieve:
1 We want to bind the data one way so that we can display the list of all grades on the screen and as soon as they are all displayed we want to somehow remove the bindings.
2. When users update the comments for a particular grade we then want to dynamically bind that particular grade so that Angular knows exactly which one it has to update without having to go through the whole collection of 2000+ grades.
I have find a tutorial however I am still unsure how to integrate that into my code.
I have also watched this video and I understand the concept behind it but again, I am struggling to write something that actually works ( we have just started using Angular so I am pretty much a newbie)
Could anyone out there point me in the right direction and provide me with some code samples that would solve the issue we are facing? Any advice and help would be greatly appreciated

You could always use a directive
The logic should go like this
use a service to hold your grades
inject the service into your directive
make a copy and just bind the 'read only view' in your directive
you could watch the service for changes and makes updates as needed
in your directive
as far a lazy loading / updating when needed - use a data service
and call the data service for an update whenever the trigger fires
if your trigger needs to come as a push from some other 'web service' consider a technology
like http://socket.io/
I can put together an example if you would like to see how the services and directives should interact