Develop Reference

How to detect whether an element inside a component is overflown in Vue?

I have a component ResultPill with a tooltip (implemented via vuikit) for the main container. The tooltip text is calculated by a getter function tooltip (I use vue-property-decorator) so the relevant bits are:
<template>
<div class="pill"
v-vk-tooltip="{ title: tooltip, duration: 0, cls: 'some-custom-class uk-active' }"
ref="container"
>
..some content goes here..
</div>
</template>
<script lang="ts">
#Component({ props: ... })
export default class ResultPill extends Vue {
...
get tooltip (): string { ..calcing tooltip here.. }
isContainerSqueezed (): boolean {
const container = this.$refs.container as HTMLElement | undefined;
if(!container) return false;
return container.scrollWidth != container.clientWidth;
}
...
</script>
<style lang="stylus" scoped>
.pill
white-space pre
overflow hidden
text-overflow ellipsis
...
</style>
Now I'm trying to add some content to the tooltip when the component is squeezed by the container's width and hence the overflow styles are applied. Using console, I can roughly check this using $0.scrollWidth == $0.clientWidth (where $0 is the selected element), but when I start tooltip implementation with
get tooltip (): string {
if(this.isContainerSqueezed())
return 'aha!'
I find that for many instances of my component this.$refs.container is undefined so isContainerSqueezed doesn't help really. Do I have to somehow set unique ref per component instance? Are there other problems with this approach? How can I check whether the element is overflown?
PS to check if the non-uniqueness of refs may affect the case, I've tried to add to the class a random id property:
containerId = 'ref' + Math.random();
and use it like this:
:ref="containerId"
>
....
const container = this.$refs[this.containerId] as HTMLElement | undefined;
but it didn't help: still tooltip isn't altered.
And even better, there's the $el property which I can use instead of refs, but that still doesn't help. Looks like the cause is this:
An important note about the ref registration timing: because the refs themselves are created as a result of the render function, you cannot access them on the initial render - they don’t exist yet! $refs is also non-reactive, therefore you should not attempt to use it in templates for data-binding.
(presumably the same is applicable to $el) So I have to somehow recalc tooltip on mount. This question looks like what I need, but the answer is not applicable for my case.

So, like I've mentioned in one of the edits, docs warn that $refs shouldn't be used for initial rendering since they are not defined at that time. So, I've made tooltip a property instead of a getter and calcuate it in mounted:
export default class ResultPill extends Vue {
...
tooltip = '';
calcTooltip () {
// specific logic here is not important, the important bit is this.isContainerSqueezed()
// works correctly at this point
this.tooltip = !this.isContainerSqueezed() ? this.mainTooltip :
this.label + (this.mainTooltip ? '\n\n' + this.mainTooltip : '');
}
get mainTooltip (): string { ..previously used calculation.. }
...
mounted () {
this.calcTooltip()
}
}

Angular 2/Typescript Delete Object On Button Click

I have an Angular 2 app using Typescript but i am new to this, what i have is a table with a 'Delete' button,
I can pass the object data to my confirmation modal but when i 'Confirm' it, its still in my table.
delete-modal.component
import { Component, OnInit, Inject, Input } from '#angular/core';
import { TestService } from '../../ABC/TestService/TestService.service';
import { MdDialog, MdDialogRef, MD_DIALOG_DATA } from '#angular/material';
import { testModal } from 'models/test';
#Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.css']
})
export class testDeleteModalComponent implements OnInit {
#Input('test') test: testModal;
constructor(private TestService: TestService, private accountService: AccountService,
#Inject(MD_DIALOG_DATA) private dialogData: any) { }
ngOnInit() {
console.log('test', this.dialogData.beneficiary);
this.test = this.dialogData.test;
}
deleteTest() {
if (this.dialogData.test.identifier) {
// this.dialogData.beneficiary.splice(this.dialogData.beneficiary.indexOf(this.beneficiaryAnt), 1);
// this.dialogData.beneficiary.splice(this.beneficiary);
// delete this.beneficiary;
this.dialogData.test.splice(this.dialogData.test.indexOf(this.dialogData.test), 1);
} else {
this.dialogData.test.operation = 'X';
}
}
}
HTML
<button md-icon-button (click)="deleteTest()" name="deleteTestDetails">
<md-icon>delete forever</md-icon>
</button>
All other HTML is in a main component and the 'Delete' button is used as shown below
<app-test-main-page-delete-button [test]="test"></app-test-main-page-delete-button>
The 'deleteTest' method is called when the user click the confirm button.
I have also included above some ways i have tried in the IF but they always come back
... is not a function

It is good that you asked this question, my projects of three peoples also struggling with this. we have found is two ways. what i will show is two ways of doing typescriptdelete.
solution a.
because it is object, it will need identifier. First is
var objectdelete = {
identifier: 'Mydelte',
value: '168%'
}
Next what we need is now service. some people call them directives but from my experience they are the same thing. We have alert so user knows if they did not set identifier that they must go back. I do not see service on your side, i see array being deleted. if you combine the array and the service, this will then be working across whole website.
export class DeleteService
delete(objectToDelete: string) {
if (!objectToDelete.identifier) {
alert('No identifer');
}else {
// Delete from your array here.
}
}
Solution 2.
If the above does not meed your needs, our tema also experimented with interfaces in typescript. You can see them here https://www.typescriptlang.org/docs/handbook/interfaces.html
so it becomes
export class myDeleteService {
deleter: IDeleter
}
export interface IDeleter {
delete: this.delete.delete(deletE);
deleteArray: this.array =[];
}
then simply in your html it will be
<button (click)='delete(dieleter)'>Delete me!</button>
These are all common typescript behaviours for angular2/4/5 so we are hoping to become more used to them when we have hads more time to use them!

The easiest way to delete data object on button click and refresh instantly when it's done :
Your parent html has to call children like this :
<app-component [inputData]="dataTable" (inputDataChange)="resetData()"/>
Add dataTable as class variable and implement the output function :
resetData() { this.dataTable=[] }
Then in children html leave your code (you can use this changes)
<button class="fa fa-delete" (click)="deleteTest()" name="deleteTestDetails">Delete</button>
Finaly in your children ts file set your data object for each change, and implement your input function
myDataTable: any = [];
#Input set inputData(data: DataTable) {
if(data) {
this.myDataTable = data;
}}
#Output() inputDataChange: EventEmitter<any> = new EventEmitter();
deleteTest() {
this.inputDataChange.emit(true);
}
What does this code do ?
It will emit and event to the parent when the delete button is clicked, then your parent will delete the dataTable, and finally, your children input will refresh it, as setter will catch the changes and refresh the variable.
If you want to apply those rules to table changes, then simply emit your dataTable and reassign it instead of reset it.

I am in a project with and our team have struggled on this for a whiles.
First thing I will say is this, Angular has not made this an easy task, so we will attempt to ignore the framework and write pure Java instead to make our lives easyer on ourselves.
SO looking at your button, I can see that you have started on the right track.
If the button is calling your component like the following
Html/Java
<button ng-click="delete()">Click me<button>
Component.ts
function delete = deleteMethod(testIdentifier) {
var abc = this.beneficiary.beneficiaryIdentifier.test.splice(this.beneficiary.beneficiaryIdentifier.test.indexOf(testIdentifier));
component2.deleteFunction();
}
Component2.ts
Then we can pass our identifiers into our parent or child components and remove the beneficiary like so:
deleteMethod(deetle) {
this.beneficiary.removeAtIndex(testIdentifier.splice(1), 1);
}
Nice and easy looking back, but it took our team of threes a long whiles to figure that ones out.

Angular 4 Change form input value to # while tying

I am trying to mimic what is done with passwords, where whatever an user types, it is substituted by •••••••, except that I want to do this for numbers and only show the last four numbers. So far I have the events in my #Directive that capture the keystrokes, but don't actually emit or propagate any change up the stream (in the input) to change the value.
Ex. #####1234
<input id="indTaxId" type="text" name="indTaxId"
[(ngModel)]="payLoadService.individual.taxId"
required maxlength="9" pattern="^[0-9]{9}$"
[lastFourDirective]="payLoadService.individual.taxId"
(lastFourDirectiveOutput)="payLoadService.individual.taxId"
/>
last-four.directive.ts
#Directive({
selector: '[lastFourDirective]'
})
export class LastFourDirective implements OnInit {
private el: HTMLInputElement;
constructor(
private elementRef: ElementRef
) {
this.el = this.elementRef.nativeElement;
}
ngOnInit() {
}
#Input() lastFourDirective: string;
#HostListener('blur', ['$event.target.value'])
onBlur(value) {
console.log("blur", value);
return this.lastFourDigits(value)
}
#HostListener('keyup', ['$event.target.value'])
onKeyup(value) {
console.log("keyup", value);
return this.lastFourDigits(value)
}
private lastFourDigits(taxId: string) {
return taxId.replace(/\d(?=\d{4})/g, '#')
}
}
How can I accomplish this?
PS: I'm not using formControl, above is a sample of my input.

You are using a directive so certainly there is a global need for you to do this in your application. I haven't worked on angular4 (I really thought, somehow I could use a filter here but was unable) but if there isn't a global need for this kind of input box, why don't you write a function in your component itself and trigger it on (keyup) and (blur) events. For example:
<input id="indTaxId" type="text" name="indTaxId"
[(ngModel)]= payLoadService.individual.taxId
required maxlength="9" pattern="^[0-9]{9}$"
(keyup)="foo()"
(blur)="foo()"
/>
and in your component:
foo() {
this.payLoadService.individual.taxId = this.payLoadService.individual.taxId.replace(/\d(?=\d{4})/g, '#');
}
Now I don't have an answer if you want to implement through a directive, but I can suggest you another solution if you want this functionality at multiple places, you can make a password input component containing only this functionality i.e. only the input box and use this component wherever you want such input boxes.

Add directive from directive

I have a directive deciding if an input must be required, masked, etc... I ran into a situation that I need to add a new directive to it: basically this new directive adds the mask feature to the input.
<input type="text" formInput [rules]="rules" [(ngModel)]="value" />
This is the formInput directive:
export class DefaultFormInputDirective {
#Input() private rules;
private el: ElementRef;
constructor(el: ElementRef) {
this.el = el;
}
ngOnInit() {
this.defineRules();
}
defineRules() {
if(this.rules == undefined) {
return;
}
if(this.rules.indexOf('required') != -1) {
this.el.nativeElement.required = true;
}
if(this.rules.indexOf('numeric') != -1) {
// Here is where I need to add currencyMask directive
}
}
}
This is the package I am using: https://www.npmjs.com/package/ng2-currency-mask

Adding directives dynamically is not supported. You can only add/remove components dynamically.

In most cases I would recommend to add attributes directly to the input as it seem much more approrpriate approach to me.
Anyway to achieve this you can create some kind of input abstraction component that will accept such inputs like type, will work with ngModel (you can find more about this here or here for instance) and will contain whatever input you need with any attributes and directives.
So it may look like this in the end:
<custom-input type="text" formInput [rules]="rules" [(ngModel)]="value"></custom-input>
Then you can hide your logic on what actual input has to be like in this component: assign needed attributes, directives and many other things you'll need.

How do I detect change to ngModel on a select tag (Angular 2)?

I am attempting to detect a change on ngModel in a <select> tag. In Angular 1.x, we might solve this with a $watch on ngModel, or by using ngChange, but I've yet to understand how to detect a change to ngModel in Angular 2.
Full Example: http://plnkr.co/edit/9c9oKH1tjDDb67zdKmr9?p=info
import {Component, View, Input, } from 'angular2/core';
import {FORM_DIRECTIVES} from 'angular2/common';
#Component({
selector: 'my-dropdown'
})
#View({
directives: [FORM_DIRECTIVES],
template: `
<select [ngModel]="selection" (ngModelChange)="onChange($event, selection)" >
<option *ngFor="#option of options">{{option}}</option>
</select>
{{selection}}
`
})
export class MyDropdown {
#Input() options;
selection = 'Dog';
ngOnInit() {
console.log('These were the options passed in: ' + this.options);
}
onChange(event) {
if (this.selection === event) return;
this.selection = event;
console.log(this.selection);
}
}
As we can see, if we select a different value from the dropdown, our ngModel changes, and the interpolated expression in the view reflects this.
How do I get notified of this change in my class/controller?

Update:
Separate the event and property bindings:
<select [ngModel]="selectedItem" (ngModelChange)="onChange($event)">
onChange(newValue) {
console.log(newValue);
this.selectedItem = newValue; // don't forget to update the model here
// ... do other stuff here ...
}
You could also use
<select [(ngModel)]="selectedItem" (ngModelChange)="onChange($event)">
and then you wouldn't have to update the model in the event handler, but I believe this causes two events to fire, so it is probably less efficient.
Old answer, before they fixed a bug in beta.1:
Create a local template variable and attach a (change) event:
<select [(ngModel)]="selectedItem" #item (change)="onChange(item.value)">
plunker
See also How can I get new selection in "select" in Angular 2?

I have stumbled across this question and I will submit my answer that I used and worked pretty well. I had a search box that filtered and array of objects and on my search box I used the (ngModelChange)="onChange($event)"
in my .html
<input type="text" [(ngModel)]="searchText" (ngModelChange)="reSearch(newValue)" placeholder="Search">
then in my component.ts
reSearch(newValue: string) {
//this.searchText would equal the new value
//handle my filtering with the new value
}