Qual é o melhor caminho para @outputo valor de uma variável com sinal angular?
Digamos que temos o seguinte
$foo = signal<string>('')
@Output() fooChanged: EventEmitter<string> = new EventEmitter<string(this.$foo())
efeito : Meu primeiro pensamento seria usar, effectmas pelo que li, deveria ser evitado, se possível.
computado : Eu adoraria usá-lo, mas não sei como implementá-lo corretamente
Para sua informação: estou usando angular 19.1.0com karma
Vamos supor que temos este serviço e componente
// NOT PROVIDED IN ROOT!
@Injectable()
export class TestService {
getData(): string {
return 'this is real data'
}
}
// Standalone component!
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.scss',
providers: [TestService]
})
export class AppComponent {
service = inject(TestService)
}
Como você notou, o serviço não é fornecido na raiz, mas é fornecido no componente e injetado também. Percebi com essa configuração que não consigo simular esse serviço nos testes de unidade karma. Posso ver que tem a ver com o serviço sendo fornecido no componente, mas não tenho certeza de como posso consertar. Aqui está um trecho do teste.
describe('AppComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [AppComponent],
providers: [{
provide: TestService,
useValue: {
getData: () => ('mocked data'),
}
}]
}).compileComponents();
});
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
console.log(app.service.getData())
});
});
Eu deveria esperar aqui que app.service.getData()deveria sair "mocked data", no entanto, eu recebo "this is real data".
No Angular, [(ngModel)]="abc"eu sei que isso significa ligação bidirecional, alterar o valor abc no modelo (ts) refletirá na visualização (html), alterar o valor da visualização atualizará o valor no modelo, conforme testado no caso 5 no exemplo a seguir. Eu também sei [ngModel]="abc"que significa que se o valor do modelo "abc" for alterado, a visualização será atualizada de acordo, conforme testado no caso 1 no exemplo a seguir.
[(ngModel)]="abc"como a alteração de visualização (html) atualiza o valor do modelo (ts)?Eu vi a pergunta
[https://stackoverflow.com/questions/46120731/angular-ngmodel-vs-ngmodel-vs-ngmodel][1]
ele menciona
[(ngModel)]="expression"
é desembrulhado pelo compilador em
[ngModel]="expression" (ngModelChange)="expression=$event"
no meu caso, a expressão é "abc", então tento simular nos casos 2,3,4 (especialmente no caso 3), mas nem todos conseguem refletir a mudança da visualização para o modelo.
o código de teste é o seguinte:
test-binding1.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test-binding1',
templateUrl: './test-binding1.component.html',
styleUrls: ['./test-binding1.component.css']
})
export class TestBinding1Component implements OnInit {
constructor() { }
abc:string = "2";
ngOnInit() {
}
}
teste-binding1.component.html
<p>case 1: Input with [ngModel]:<input type="text" [ngModel]="abc"/></p>
<p>case 2: Input with (ngModel):<input type="text" (ngModel)="abc"/></p>
<p>case 3:Input with (ngModelChange)="expression=$event":<input type="text"
(ngModelChange)="abc=$event"/></p>
<p>case 4:Input with (ngModelChange)="$event":<input type="text"
(ngModelChange)="$event"/></p>
<p>case 5:Input with [(ngModel)]:<input type="text" [(ngModel)]="abc"/></p>
<p>case 6:{{abc}}</p>
ao visitar o test-binding1.component.html, os casos 1, 5, 6 mostram 2 inicialmente, os casos 2,3,4 mostram em branco.
Se eu atualizar o valor da caixa de texto no caso 5, o valor da caixa de texto no caso 1, 6 muda de acordo, o valor da caixa de texto no caso 2,3,4 não tem efeito.
Se atualizar o valor na caixa de texto caso 1,2,3,4, nenhuma mudança em outro valor da caixa de texto.
Recentemente, migrei com sucesso um aplicativo meu para o Angular 19 e o PrimeNG 19. Tudo o que eu tinha planejado fazer depois era migrar para o novo uso preferencial de componentes autônomos.
As duas primeiras etapas desse processo são automatizadas usando ng g @angular/core:standalone:
...correu bem. O aplicativo em execução após essas duas etapas pode ser encontrado em https://tzexplorer.org . O link do Github acima para meu branch de desenvolvimento tem o código naquele último estado bem-sucedido.
Mas minhas tentativas de atingir a etapa final (inicializar o aplicativo usando APIs autônomas) estão sendo frustradas por este erro de tempo de execução:
O meu main.tsfica assim:
import { enableProdMode, importProvidersFrom } from '@angular/core';
import { environment } from './environments/environment';
import { initTimezoneLarge } from '@tubular/time';
import { themeProvider } from './app/mytheme';
import { AppService } from './app/app.service';
import { HttpTimePoller } from './app/http-time-poller/http-time-poller';
import { TzExplorerApi } from './app/api/api';
import { provideHttpClient, withInterceptorsFromDi, withJsonpSupport } from '@angular/common/http';
import { AppRoutingModule } from './app/app-routing.module';
import { AutoCompleteModule } from 'primeng/autocomplete';
import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';
import { ButtonModule } from 'primeng/button';
import { CheckboxModule } from 'primeng/checkbox';
import { DialogModule } from 'primeng/dialog';
import { FormsModule } from '@angular/forms';
import { InputTextModule } from 'primeng/inputtext';
import { RadioButtonModule } from 'primeng/radiobutton';
import { RippleModule } from 'primeng/ripple';
import { SelectModule } from 'primeng/select';
import { TabsModule } from 'primeng/tabs';
import { TubularNgWidgetsModule } from '@tubular/ng-widgets';
import { AppComponent } from './app/app.component';
if (environment.production) {
enableProdMode();
}
initTimezoneLarge();
bootstrapApplication(AppComponent, {
providers: [
importProvidersFrom(AppRoutingModule, AutoCompleteModule, BrowserModule, ButtonModule, CheckboxModule,
DialogModule, FormsModule, InputTextModule, RadioButtonModule, RippleModule, SelectModule, TabsModule,
TubularNgWidgetsModule),
themeProvider,
AppService,
HttpTimePoller,
TzExplorerApi,
provideHttpClient(withInterceptorsFromDi(), withJsonpSupport()),
provideAnimations()
]
})
.catch(err => console.error(err));
...que é essencialmente apenas uma questão de um monte de importações sendo retiradas do meu quase sem alterações app.component.tse movidas para o main.ts, onde main.tsforam platformBrowserDynamic().bootstrapModule(AppModule)substituídas pelo novo bootstrapApplication(AppComponent....
Todos os conselhos que consegui encontrar até agora estão relacionados a rastrear referências redundantes para BrowserModule, BrowserAnimationsModule, provideAnimationse provideAnimationsAsync. Não tenho nada disso acontecendo no meu código, pelo menos de forma óbvia.
Minha principal suspeita neste momento é que alguma inicialização do PrimeNG seja a fonte da redundância, mas se for esse o caso, não sei onde ou como isso acontece, ou como contornar isso.
Tentei comentar os provedores um por um até não sobrar nada, mas o erro de tempo de execução ainda permanece. Tentei mover boa parte da complexidade do main.tsarquivo para um app.config.ts, mas isso também não ajudou.
Alguém tem alguma ideia?
Com o rxjs 7.5.7, eu retorno uma promessa quando uma solicitação http de pesquisa finalmente retorna true após vários valores false, mas takeUntil nunca é chamado novamente.
Tentei o seguinte código:
return timer(0, 5000).pipe(
takeUntil(this.http.get('https://testapi/isTrue'))
.pipe(filter((isTrue: boolean) => {
return isTrue; // filter method filters false values so they are not emitted
}))
)
).toPromise();
Nota:
https://testapi/isTrueretorna false várias vezes e true no final.
Mas após a primeira chamada para a solicitação de consulta http this.http.get() iniciada pelo timer cujo resultado da chamada é falso, nada acontece após 5 segundos do timer, nenhum erro, this.http.get() em takeUntil não é mais chamado.
Então o que há de errado com minhas instruções?
Nota 2: A promessa retornada é consumida corretamente
Encontrei o erro abaixo ao usar o pop-up de diálogo do material Angular. Quando clico no botão Adicionar produto, o erro abaixo é encontrado
Bloqueado aria-hidden em um elemento porque seu descendente manteve o foco. O foco não deve ser escondido de usuários de tecnologia assistiva. Evite usar aria-hidden em um elemento focado ou seu ancestral. ...
Meu link do stackblitz é https://stackblitz.com/github/reegan2024/mygithubrepo?file=README.md
Alguém pode ajudar com isso?
Usando IntelliJ IDEA 2024.3.3 (Ultimate Edition) e o Angular Plugin 243.24978.46 incluído
O IDE não conhece mais nenhum bloco específico do Angular como @ifou @fore os mostra como erros.
Até onde me lembro, isso costumava funcionar em outros projetos.
Para uma página de apresentação, quero exibir o conteúdo da minha página elemento por elemento com animações Angular
Meu objetivo era fazer uma animação que escondesse meu conteúdo e fazer uma animação para cada elemento, mas meu conteúdo fica bem escondido (:self), mas as outras animações não têm efeito até o final da animação, onde todo o meu conteúdo aparece de uma vez
animations : [
trigger('homeAnimations', [
transition(':enter', [
query(':self',[
style({opacity:0})
]),
query('#presentation h1', [
animate('2s', style({ opacity: 1 }))
], { optional: true }),
query('#presentation h2', [
animate('2s', style({ opacity: 1 }))
], { optional: true }),
query('#presentation p', [
animate('2s', style({ opacity: 1 }))
], { optional: true }),
query('#btn1', [
animate('2s', style({ opacity: 1 }))
], { optional: true }),
query('#btn2', [
animate('2s', style({ opacity: 1 }))
], { optional: true }),
query('#btn3', [
animate('2s', style({ opacity: 1 }))
], { optional: true }),
])
])
],
Tenho um componente dropdown Angular ( CustomDropdownComponent) que recebe uma lista de opções e um valor selecionado de seu componente pai via @Input(). O pai também escuta as alterações de seleção usando @Output().
No entanto, intencionalmente não atualizei o selectedValueno pai ao manipular o selectionChangeevento ( ) para ver se o menu suspenso reverteria para a seleção padrão. Surpreendentemente, o menu suspenso ainda atualiza para a opção recém-selecionada, mesmo que o estado pai permaneça inalterado.
Minhas perguntas:
Aqui está uma versão simplificada da minha implementação:
Componente pai ( app.component.ts)
export class AppComponent {
options = [
{ value: '1', text: 'Option 1' },
{ value: '2', text: 'Option 2' },
{ value: '3', text: 'Option 3' }
];
selectedValue = ''; // Intentionally not updating this when selection changes
handleOnChange(event: any) {
console.log(event.target.value); // Logging the value but not saving it
}
}
Modelo de componente pai ( app.component.html)
<app-custom-dropdown
[options]="options"
[selected]="selectedValue"
(selectionChange)="handleOnChange($event)">
</app-custom-dropdown>
Componente filho ( custom-dropdown.component.ts )
@Component({
selector: 'app-custom-dropdown',
templateUrl: './custom-dropdown.component.html',
styleUrls: ['./custom-dropdown.component.scss']
})
export class CustomDropdownComponent {
@Input() options: { value: string; text: string }[] = [];
@Input() selected: string = '';
@Output() selectionChange: EventEmitter<any> = new EventEmitter<any>();
onChange(event: any) {
this.selectionChange.emit(event); // Emitting value but parent does not save it
}
}
Modelo de componente filho ( custom-dropdown.component.html)
<select (change)="onChange($event)" [value]="selected">
<option value="" hidden>default</option>
<option *ngFor="let option of options" [value]="option.value">
{{ option.text }}
</option>
</select>
Hoje, atualizei para o Angular 19 e estou com um problema que não consigo resolver.
"Instalei a versão angularx-qrcode: "^19.0.0"e estou recebendo uma mensagem de erro que não entendo...
error TS2304: Cannot find name 'QRCodeModule'.
QRCodeModule,
Compartilharei todos os arquivos relevantes com você.
login.módulo.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SigninComponent } from './signin.component';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { TranslocoModule } from '@ngneat/transloco';
import { SigninService } from './signin.service';
import { PipesModule } from 'src/shared/pipes/pipes.module';
import { LanguageSelectorModule } from 'src/shared/component/language-selector/language-selector.module';
@NgModule({
imports: [
CommonModule,
FormsModule,
QRCodeModule,
],
declarations: [
SigninComponent,
],
providers: [
SigninService
]
})
export class SigninModule { }
Agradeço sua ajuda e o tempo que você dedicou ao meu problema.