What's the equivalent of a DataTemplateSelector in .NET? - css

Reaching out of my .net stomping grounds and can't seem to figure out if there's an equivalent to what you would use DataTemplateSelector for in .net, but for use in an ionic driven html5 and angularjs project. Could someone please point me in the right direction?
For example, I know I can go in and plop in an equivalent to ItemsControl with a quick angular hook into the ng-repeat kind of like;
<ion-list>
<ion-item ng-repeat="blah in something | orderBy:'whatever'" href="#/my/crap/{{blah.blah}}">
<!-- stuff -->
</ion-item>
</ion-list>
Which of course I can supply a template with that is for every generated child but I need to flip it out for some different looking parts when needed.
I screwed around with ng-switch but couldn't get what I was shooting for and I'd prefer not to re-invent the wheel if it's existing functionality that I'm just not finding.
Basic intent. Provide more than one item template within a repeated list to display items different based on some criteria. Any insight? Thanks

There are a number of ways to achieve the equivalent of DataTemplateSelector - depending on your needs and view on "elegancy". Probably the closest one is with ng-include, but for simple cases you could also use ng-if and ng-switch.
1) ng-include
<div ng-repeat="item in items">
<div ng-include="itemDataTemplateSelector(item)"></div>
</div>
$scope.itemDataTemplateSelector = function(item){
if (item.type === "foo" && item.something.else) return "/path/to/foo/template.html";
...
}
2) using ng-ifs
<div ng-repeat="item in items">
<div ng-if="item.type === 'foo'">
... foo template
</div>
<div ng-if="item.type === 'bar'">
... bar template
</div>
</div>
3) using ng-switch
<div ng-repeat="item in items" ng-switch on="item.type">
<div ng-switch-when="foo">
... foo template
</div>
<div ng-switch-when="bar">
... bar template
</div>
</div>
Here's a plunker

Related

How to disable cdkDrag dragging animation?

I have an example where I used cdkDrag.I dont wanna see anything when I start to drag.How can I disable CSS classes which applied on dragging state?
Above you can see there's a little view of my item when I drag it and I dont wanna see.How can it be possible?I couldnt find which CSS class should be disabled.
https://stackblitz.com/edit/angular-gbls7d-rih7te?file=src/app/cdk-drag-drop-connected-sorting-example.html
You can customize the dragging preview with cdkDragPreview directive, described in Angular Materials D&D CdkDragPreview docs.
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let movie of movies" cdkDrag>
{{movie.title}}
<img *cdkDragPreview [src]="movie.poster" [alt]="movie.title">
</div>
</div>
See example Stackblitz.
For your example you can add an element into your cdkDrag root element.
E.g.:
...
<tr *ngFor="let feed of todo;let index = index" cdkDrag (cdkDragStarted)="started($event)">
<span *cdkDragPreview>Test</span>
<td>
...
Check your adapted Stackblitz.

Having an Angular Dynamic Form Generator Bootstrap CSS Issue

I am attempting a dynamic form generator based on Angular's Dynamic Forms template using Angular 7 and I'm running into a css issue. I am using Bootstrap 4.0 and I hope it's not an issue where I need to go back to 3.0 (I had a prior issue that involved that, but correct re-coding got it to work in 4.0). If so, please let me know.
Now, here is the way that my app works correctly for my end product. My code to generate the drop downs is:
<div class="row">
<div *ngFor="let question of questions" class="col-md-6 form-group">
<label for="{{question.key}}">{{question.label}}</label>
<span [ngSwitch]="question.controlType">
<select *ngSwitchCase="'dropdown'"
[id]="question.key"
[formControlName]="question.key"
[className]="question.fieldClass">
<option *ngFor="let opt of question.options" [ngValue]="opt.value">{{opt.name}}</option>
</select>
</span>
<span class="help-block error" *ngIf="isFormTouchedAndInvalid(question.key)">{{question.label}} is invalid</span>
</div>
</div>
When this gets rendered to the screen, the drop downs are aligned correctly, with the correct widths, as you can see:
Now, if I follow Angular's method, my main code block will now become:
<div class="row">
<app-question *ngFor="let question of questions" [question]="question" [form]="form"></app-question>
</div>
And my app-question component has the following code:
<div [formGroup]="form">
<div class="col-{{question.colType}}-{{question.colWidth}} form-group">
<label for="{{question.key}}">{{question.label}}</label>
<span [ngSwitch]="question.controlType">
<select *ngSwitchCase="'dropdown'"
[id]="question.key"
[formControlName]="question.key"
[className]="question.fieldClass"
>
<option *ngFor="let opt of question.options" [ngValue]="opt.value">{{opt.name}}</option>
</select>
</span>
<span class="help-block error" *ngIf="isFormTouchedAndInvalid(question.key)">{{question.label}} is invalid</span>
</div>
</div>
When the form renders to the screen it looks like this:
As you can see, the column widths are gone. I'm certain it has something to do with the div tag holding the FormGroup attribute, but that is required for the component to compile and work. I've tried adding it with a span tag, adding the col-md-6 class to the same tag as FormGroup, but I get the same, incorrect CSS rendering.
Is this another Bootstrap 4 issue where I may need to go down to Bootstrap 3 for this to work? If not, what is going on and how can I get the page to correctly render like the first image and yet still be able to use the app-question component in my code?
I believe that the problem is that Angular renders app-question component as a tag <app-question></app-question> and your div tags inside of it have styles relative to that app-question tag, but not the parent <div class="row">. So if you add a class col-md-6(for example) it will cover 50% of the app-question tag, but not the row one.
So if you want the styles to work, you should add the classes here
<div class="row">
<app-question *ngFor="let question of questions"
[question]="question"
[form]="form"
class="col-md-6">
</app-question>
</div>
As an alternative, you can change your app-question component decorator to make it an attribute.
#Component({
selector: '[app-question]'
})
And then use it to any tag you like
<div class="row">
<div app-question
*ngFor="let question of questions"
[question]="question"
[form]="form"
class="col-md-6">
</app-question>
</div>

how to find complex css selector

i want to fill text in selenium firefox broswer
how to find entering text selector its very complex for me please explain me the only way i want to achieve this using only css selector
<div class="Gb WK">
<div class="Rd"guidedhelpid="sharebox_editor">
<div class="eg">
<div class="yw oo"">
<div class="yw vk"">
</div>
<div class="URaP8 Kf Pf b-K b-K-Xb">
<div id="195" class="pq"
Share what's new...
</div>
<div id=":37.f" class="df b-K b-K-Xb URaP8 editable" contenteditable="true"
g_editable="true"role="textbox"aria-labelledby="195"></div>
</div>
</div>
</div>
</div>
You already wrote the cssSelector. However I will explain this for you. CssSelector allows you to use single/multiple attribute search. In case if you don't find a single attribute unique you can keep adding more attribute to the selector
Single attribute
[role='textbox']
Multiple attributes
[role='textbox'][contenteditable='true']
If you want to add div for a faster search that's possible too
div[role='textbox'][contenteditable='true']
Notice if I don't add div it's going to be tag independent search

How to remove or hide a div(or div class) but not its content with twitter-bootstrap

This is an easy question. But what I want to know is: Is there a way to delete a div without removing its content USING bootstrap? I can also refactor the question to: Is there a way to delete a div CLASS dynamically with Bootstrap?
My code is simple:
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
GOOGLE MAP
</div>
<div class="col-md-2"></div>
</div>
</div>
I know there already exists a way to make it visible and or hide it (hidden-phone ..), but what I want to do is actually remove the container, the row and the cols and leave the google map to fill the whole width.
What I have right now is:
<div class="container hidden-phone">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="googleMap"> ... </div>
</div>
<div class="col-md-2"></div>
</div>
</div>
And then, right after that, I add the div of the google map again. But instead of hidden-phone, now:
<div class="googleMap visible-phone"> ... </div>
This way, when you switch to a phone, the container and separations of the map with the screen are none.
This is the easiest way, but it seems a little unpractical, because maybe I don't see one, but it is there, so I'm downloading the map into the client twice, I believe that is not clever.
I could always use JavaScript(jQuery) to listen to the event of resizing and remove it my self.. That is not a problem at all, but maybe bootstrap has a build-in functionality already, something like a data attribute like "data-hidden-phone-class='someClass'", or maybe a class that hides some classes when resizing like: "hidden-classes-phone" this way when the screen resizes to a phone one, boostrap would hide all the classes of that element? Or something.
I know the names for attributes and classes are not attractive, but is for the purpose of the question.
I hope I made myself clear enough, let me know if you don't understand something, thanks!

Drupal views: how to put a wrapper div for two views?

I have two views in a Drupal page with the following structure:
<div>
<div>Some content</div>
<div> View 1 </div>
<div> View 2 </div>
</div>
Now I want a wrapper div covering the two views:
<div>
<div>Some content</div>
<div class="wrapper">
<div> View 1 </div>
<div> View 2 </div>
</div>
</div>
What is the best and easiest way to do this?
A cleaner way would be to use the views_embed_view function to get the output from the two views, which you then wrap in a div.
Where to put this code and how to do it, would depend on how you are doing things now. You could create a block for it and gain the flexibility of blocks.
You'll want to create a custom .tpl file for this. It would be something like, but not exactly:
views-view-viewname.tpl.php
To find the file name, edit the views then look under Basic Settings > Theme.
You can also use Views attachments (Google around to figure out how to make them). So make View 1 a normal view and attach View 2 to appear after View 1. You will get a wrapper div around both the views.

Resources