Solución:
El código equivalente de Angular6 debería ser:
app.component.html
<div (mouseover)="changeText=true" (mouseout)="changeText=false">
<span *ngIf="!changeText">Hide</span>
<span *ngIf="changeText">Show</span>
</div>
app.component.ts
@Component({
selector: 'app-main',
templateUrl: './app.component.html'
})
export class AppComponent {
changeText: boolean;
constructor() {
this.changeText = false;
}
}
Note que no existe tal cosa como $scope ya que existía en AngularJS. Ha sido reemplazado con variables miembro de la clase de componente. Además, tampoco existe un algoritmo de resolución de alcance basado en la herencia prototípica: se resuelve en un miembro de la clase de componente o no.
Agregando a lo que ya se dijo.
si quieres *ngFor un elemento, y ocultar mostrar elementos en él, al pasar el mouse, como agregaste en los comentarios, deberías reconsiderar todo el concepto.
una forma más apropiada de hacerlo, no implica angular en absoluto. En su lugar, optaría por CSS puro, usando su nativo :hover propiedad.
algo como:
App.Component.css
div span.only-show-on-hover {
visibility: hidden;
}
div:hover span.only-show-on-hover {
visibility: visible;
}
App.Component.html
<div *ngFor="let i of [1,2,3,4]" > hover me please.
<span class="only-show-on-hover">you only see me when hovering</span>
</div>
agregó una demostración: https://stackblitz.com/edit/hello-angular-6-hvgx7n?file=src%2Fapp%2Fapp.component.html
To avoid blinking problem use following code
its not mouseover and mouseout instead of that use mouseenter and mouseleave
**app.component.html**
<div (mouseenter)="changeText=true" (mouseleave)="changeText=false">
<span *ngIf="!changeText">Hide</span>
<span *ngIf="changeText">Show</span>
</div>
**app.component.ts**
@Component({
selector: 'app-main',
templateUrl: './app.component.html'
})
export class AppComponent {
changeText: boolean;
constructor() {
this.changeText = false;
}
}